React使用dangerouslySetInnerHTML后超链接无下划线、有序列表无序号？

我通过后端将HTML代码发送至React前端应用，使用dangerouslySetInnerHTML渲染该数据，但出现超链接无下划线、有序列表无序号的情况（不确定是否为正常表现）。以下是相关代码：

const html = `<div>bro what <a href="https://www.w3schools.com/">Visit W3Schools.com!</a><ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> </div>`

const summary = <div dangerouslySetInnerHTML={{ __html: html }} />;

渲染效果：

请问我遗漏了什么？

这不是dangerouslySetInnerHTML的问题，是你的React项目里的全局样式重置或框架默认样式覆盖了HTML元素的原生样式。大部分现代前端框架、CSS重置方案（如Normalize.css）或CSS工具类库（如Tailwind）会默认去掉<a>的下划线、<ol>的序号，以统一项目的基础样式风格。

解决办法 #

1. 自定义样式恢复原生效果

给渲染HTML的容器添加一个专属类名，然后针对该类下的元素编写CSS，恢复默认样式：

// 修改后的组件代码
const html = `<div>bro what <a href="https://www.w3schools.com/">Visit W3Schools.com!</a><ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> </div>`

const summary = <div className="rendered-html" dangerouslySetInnerHTML={{ __html: html }} />;

对应的CSS：

.rendered-html a {
  text-decoration: underline;
  color: #0066cc; /* 可选，还原默认链接蓝色 */
}

.rendered-html ol {
  list-style-type: decimal;
  padding-left: 1.5em; /* 补回有序列表默认缩进 */
}

/* 可选：优化其他富文本元素样式 */
.rendered-html p {
  margin: 1em 0;
}

2. 若使用Tailwind CSS，利用Typography插件

如果你的项目用了Tailwind，安装官方的@tailwindcss/typography插件后，直接给容器加prose类就能自动适配富文本样式：

// 需先安装并配置@tailwindcss/typography
const summary = <div className="prose" dangerouslySetInnerHTML={{ __html: html }} />;

注意点 #

• 不要直接修改全局的<a>或<ol>样式，避免影响项目中其他自定义组件的样式表现
• 如果后端返回的HTML包含更多复杂元素（如表格、标题），需要补充对应的样式适配

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