taro RichText 富文本表格边框不显示

119 阅读1分钟

在使用 Taro 开发富文本应用时,如果遇到富文本表格边框不显示的问题,通常是因为样式设置不当或者缺少相应的 CSS 样式

import { RichText } from "@tarojs/components"
import "./index.less"
interface Props {
  value: string
}
const ElRichText: React.FC<Props> = ({ value }) => {
  const processingNode = (node: any) => {
    node = node.replace(/<table/g, '<table class="elc-table"')
    node = node.replace(/<tr/g, '<tr class="elc-tr"')
    node = node.replace(/<td/g, '<td class="elc-td"')
    node = node.replace(/<p/g, '<p class="elc-text"')
    return node
  }
  return (
    <>
      <RichText nodes={processingNode(value)} />
    </>
  )
}
export default ElRichText


.elc-table {
  border-collapse: collapse;	/* 边框合并 */
  // border-spacing: 0 !important;
}
.elc-tr {
    margin: 0 !important;
}
.elc-td {
  text-align: center;		/* 字体居中 */
  border: 2rpx solid #000;	/* 边框样式 */
  font-size: 20rpx;
  padding: 10rpx 4rpx;
  margin: 0 !important;
}
.elc-text{
  font-size: 24rpx;
  line-height: 50rpx;
  color: #000;
}