为什么 CSS 类在 Next.js 中使用 dangerouslySetInnerHTML 时不起作用（以及如何修复）

Source: Dev.to

问题

在 React / Next.js 中处理 SEO 驱动或基于 CMS 的内容时，我们常常使用 dangerouslySetInnerHTML 来渲染 HTML 字符串。一切看起来都正常……直到在 HTML 内容里加入 CSS 类，发现样式根本没有生效。

示例内容

const content = `
  You can consult certified nutritionists
  from home.
`;

渲染方式如下：

并使用 styled‑jsx 进行样式定义：

{`
  .highlight {
    color: #0a7cff;
    font-weight: 600;
  }
`}

结果： .highlight 的样式 没有 被应用。

原因： Next.js 使用 styled-jsx，它会把 CSS 作用域限制在 JSX 渲染的元素上。作用域之外的选择器，例如：

.highlight { ... }

会被转换成类似下面的形式：

.highlight.jsx-123456 { ... }

但注入的 HTML 并没有得到该哈希标识，所以样式永远匹配不到。

解决办法

将你的类选择器用 :global() 包裹，使其不受作用域限制。

{`
  :global(.highlight) {
    color: #0a7cff;
    font-weight: 600;
  }

  :global(.link) {
    color: #0070f3;
    text-decoration: underline;
  }
`}

这样注入的 HTML 就能正常工作，样式也会如预期那样被应用。