React中如何让导入的CSS仅作用于渲染动态HTML的单个组件

普通CSS不具备组件级样式隔离能力，即使你仅在单个组件文件中引入样式文件，项目打包时所有CSS规则都会被注入全局样式表。你当前直接写的h1、h2裸标签选择器会匹配页面所有同名标签，自然会全站生效。

方案1：父容器选择器限定作用域（零依赖，最适配当前场景） #

你已经为动态内容外层设置了container-HTMLContent类名，只需要把所有针对动态HTML的样式规则，都嵌套在该父类选择器下，即可让样式仅生效于容器内部元素，完全不会影响外部页面。
修改你的style.css代码如下：

/* 仅匹配.container-HTMLContent容器内部的元素，不会泄露到全局 */
.container-HTMLContent h1 {
  border: 3px solid red;
  font-weight: 800 !important;
  font-size: 1.7rem !important;
  line-height: 1.2 !important;
}

.container-HTMLContent h2 {
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
}

/* 后续需要新增的动态内容样式，都以.container-HTMLContent作为前缀即可，例如：
.container-HTMLContent p {
  line-height: 1.6;
  margin: 1rem 0;
}
.container-HTMLContent img {
  max-width: 100%;
  border-radius: 4px;
}
*/

该方案不需要修改现有组件逻辑，兼容所有React版本，是处理dangerouslySetInnerHTML渲染内容样式的通用方案。

方案2：使用CSS Modules（脚手架默认支持，彻底避免样式污染） #

如果你的项目基于Create React App、Vite等常见脚手架搭建，默认支持CSS Modules能力。你可以将样式文件重命名为[组件名].module.css格式，通过模块方式导入样式，打包时会自动生成唯一哈希类名，从机制上避免全局样式冲突。

1. 将原style.css重命名为HtmlRender.module.css，样式代码调整为：

.contentWrap h1 {
  border: 3px solid red;
  font-weight: 800 !important;
  font-size: 1.7rem !important;
  line-height: 1.2 !important;
}

.contentWrap h2 {
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
}

2. 修改组件中的样式导入和类名绑定：

// 导入CSS模块
import styles from './HtmlRender.module.css';

// 渲染部分代码
{props.content &&
  <div className={styles.contentWrap}>
      {textToDisplay && <div dangerouslySetInnerHTML={{ __html: textToDisplay }} className="my-4"></div>}
      <button onClick={() => setIsOpen(!isOpen)} className="underline">{isOpen ? "Voir moins" : "Lire la suite +"}</button>
  </div>
}

方案3：CSS-in-JS（项目已引入相关依赖时使用） #

如果项目中已经使用styled-components、Emotion这类CSS-in-JS库，可以直接在组件内编写作用域样式，这类库会自动实现样式隔离，不需要手动处理选择器前缀问题。

提示：针对dangerouslySetInnerHTML渲染的第三方/接口返回HTML内容，不要使用裸标签选择器编写样式，所有相关样式必须限定在自定义的组件容器范围内，从根源上避免样式泄露。

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