如何使用 styled-components 全局设置动态反应数据 (dangerouslySetInnerHTML) 的样式？

Question

考虑到我们有这个组件：

const Policy = ({ policy }) => (
    <div dangerouslySetInnerHTML={ { __html: policy } }></div>
)
export default Policy

还有其他类似的（对于每个场景，h1、h2 等）：

import styled from 'styled-components';

const H1 = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

集中标题样式维护的正确方法是什么？

选项想法：

为 both/etc 分离并导入相同的 CSS，一个是全局的，一个是作用域的；
以某种方式将我们的后端 HTML 数据转换为我们的 React/HTML (html-to-react);
仅向此策略组件注入 CSS 样式
其他想法

我正在考虑让任何 h1、h2 等人都可以使用这种样式，但我不知道我的想法是否错误，是否应该摆脱这种旧模式出于任何原因。

这里的主要讨论是 什么是集中、设计和处理动态 html 数据的最佳方式，以应对当今的 React。

更新：也许 createGlobalStyle 是个不错的选择？

Answer 1

我会这样做：

const Policy = ({ className, policy }) => (
    <div className={className} dangerouslySetInnerHTML={{ __html: policy }}></div>
)

const StyledPolicy = styled(Policy)`
  h1 {
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  }

  h2 {
    ...
  }
`;

export default StyledPolicy

那么你不需要全局范围 CSS。

Answer 2

正如您所提到的，您有几个主要是个人偏好的选项。

使用 createGlobalStyle 函数在 head 中全局设置样式。这种方法的优点是它不会阻塞渲染，并且可以使用 className 轻松确定范围。缺点是总是在head.
使用模块化 css 并在本地确定组件范围。优点是，如果您使用的是 Webpack，那么您可以延迟导入组件模块，因此仅在需要时才需要样式表，并且它为您提供了在需要时定位 :globals 的选项。缺点是它的渲染阻塞（此外，它在下载后停留在 head 中，但是，由于它是局部范围的，它不应该干扰其他样式）并且它不能 select static child class 个名字。
使用 react-helmet 在 head 中有条件地添加样式表。这种方法的优点是它只在 head 需要的时候出现。缺点是会导致UI闪烁（因为已经在render方法/return语句中加载），必须调用API来获取样式表对于每个（重新）安装，并且不是很可重用，因为它为每个组件实例添加了样式表。

因此，我建议使用选项 1。也就是说，如果我使用的是大型样式表，则选择选项 2 —— 即使有其 select 或限制。关于这一点，除非绝对必要，否则我通常尽量不存储字符串化的 HTML。在处理数据库时，大字符串的检索速度可能很慢，而且根据用户的设备，显示速度甚至更慢。此外，使用 dangerouslySetInnerHTML 可以打开 XSS attacks. In fact, I'm in the process of making a markdown 编辑器，该编辑器利用纯文本并将其转换为 HTML on-the-fly。或许这是一个值得考虑的选择——它也处理 HTML，尽管再次打开了 XSS 漏洞。

所有 3 个选项的工作演示:

Demo

如何使用 styled-components 全局设置动态反应数据 (dangerouslySetInnerHTML) 的样式？

How to globally style dynamic react data (dangerouslySetInnerHTML) with styled-components?

javascript

css

reactjs

styled-components

next.js