如何在Strapi的Markdown富文本字段中为表格添加边框样式

问题原因 #

不管是GFM Markdown表格还是你写的内嵌HTML表格，ReactMarkdown仅负责将其转换为DOM元素，本身不会自带任何表格样式。同时绝大多数前端项目都会引入样式重置规则（如normalize.css、CSS Reset），会默认清除table、th、td元素的原生边框样式，因此两种写法都无法显示边框。
你之前写的style="border:2"语法也不完整，缺少边框样式、颜色单位，且没有给单元格加边框规则，所以也不会生效。

推荐解决方案（无需修改Strapi存储内容） #

方案1：为渲染容器添加自定义CSS #

给ReactMarkdown外层套一个带类名的容器，针对容器内的表格元素写样式即可，示例代码如下：

// 组件内代码
<div className="markdown-wrapper">
  <ReactMarkdown children={posts.Content} remarkPlugins={[remarkGfm]} />
</div>

/* 全局CSS文件 */
.markdown-wrapper table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
}
.markdown-wrapper th,
.markdown-wrapper td {
  border: 1px solid #cccccc; /* 可自定义边框宽度、颜色 */
  padding: 8px 12px;
  text-align: left;
}
.markdown-wrapper th {
  background-color: #f5f5f5;
  font-weight: 700;
}

方案2：通过ReactMarkdown的components属性配置样式 #

如果不想写全局CSS，也可以直接在组件中通过components参数为渲染出的表格元素指定样式，如果你用Tailwind CSS这种工具类框架推荐用这个方法：

<ReactMarkdown 
  children={posts.Content} 
  remarkPlugins={[remarkGfm]}
  components={{
    table: (props) => <table style={{borderCollapse: 'collapse', width: '100%', margin: '16px 0'}} {...props} />,
    th: (props) => <th style={{border: '1px solid #ccc', padding: '8px 12px', backgroundColor: '#f5f5f5', fontWeight: 'bold'}} {...props} />,
    td: (props) => <td style={{border: '1px solid #ccc', padding: '8px 12px'}} {...props} />,
  }}
/>

可选方案（需修改Strapi内容） #

如果必须在Strapi存储的内容里直接定义边框，需要把HTML表格的样式写完整，给所有th、td都加上边框规则，同时开启边框合并：

<table style="border-collapse: collapse; width: 100%;">
  <tbody>
    <tr>
      <td style="border: 2px solid #000; padding: 8px;">
        <strong>Country</strong>
      </td>
      <td style="border: 2px solid #000; padding: 8px;">
        <strong>Visa free</strong>
      </td>
      <td style="border: 2px solid #000; padding: 8px;">
        <strong>Visa on arrival</strong>
      </td>
      <td style="border: 2px solid #000; padding: 8px;">
        <strong>eVisa</strong>
      </td>
      <td style="border: 2px solid #000; padding: 8px;">
        <strong>Duration of stay and notes</strong>
      </td>
    </tr>
    <!-- 其余行同理配置单元格样式 -->
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Jay Modi