react-markdown渲染markdown时标题下划线与表格分割线不显示问题

问题根因 #

react-markdown 以及配套的 remark-gfm 插件仅负责将 Markdown 语法转换为标准 HTML 标签，本身不会内置任何可视化样式。你在官方演示页看到的分割线、表格边框都是演示页自身引入的自定义CSS实现的，不属于插件自带能力。
你可以通过浏览器元素检查工具确认：表格对应的<table>、<tr>、<td>标签，以及分割线对应的<hr>标签都已经正常生成，只是没有匹配的样式所以视觉上看不到。

解决方法 #

给包裹 Markdown 内容的 .post 容器添加专属样式即可，样式示例如下：

/* 表格样式 */
.post table {
  border-collapse: collapse;
  margin: 16px 0;
  width: 100%;
}
.post th,
.post td {
  border: 1px solid #d0d7de;
  padding: 8px 12px;
  text-align: left;
}
.post th {
  background-color: #f6f8fa;
  font-weight: 600;
}

/* 分割线样式 */
.post hr {
  border: none;
  border-top: 1px solid #d0d7de;
  margin: 24px 0;
}

如果你的项目引入了全局样式重置规则（比如Tailwind的preflight、normalize.css等），这类规则通常会默认清除表格、分割线的原生默认样式，必须手动添加上述自定义样式才能正常显示分割线和边框。

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