如何在React的dangerouslySetInnerHTML中应用CSS Modules？

要让数据库中的HTML识别CSS Modules样式，同时避免全局样式冲突，最可靠的方法是将HTML字符串中的原始类名替换为CSS Modules生成的唯一哈希类名，具体步骤如下：

1. 在CSS Modules文件中定义对应样式 #

确保你的low.module.css包含数据库HTML中所有用到的类名：

/* low.module.css */
.news_page_detail {
  /* 自定义样式规则 */
}
.Pc_only {
  /* 自定义样式规则 */
}
.btn-pink-b {
  /* 自定义样式规则 */
}
.ovbg {
  /* 自定义样式规则 */
}
.btn-inner {
  /* 自定义样式规则 */
}
.ovbg_pink {
  /* 自定义样式规则 */
}
.btn-pink-b-txt {
  /* 自定义样式规则 */
}

2. 创建类名映射并替换HTML中的类 #

在React组件中，建立数据库原始类名与CSS Modules哈希类名的映射，再通过正则替换HTML字符串里的类名：

import low from "../css/low.module.css";

// 映射数据库中的原始类名到CSS Modules生成的类名
const classMapping = {
  'news_page_detail': low.news_page_detail,
  'Pc_only': low.Pc_only,
  'btn-pink-b': low['btn-pink-b'], // 含连字符的类名用方括号访问
  'ovbg': low.ovbg,
  'btn-inner': low['btn-inner'],
  'ovbg_pink': low.ovbg_pink,
  'btn-pink-b-txt': low['btn-pink-b-txt']
};

// 替换HTML字符串中的所有类名（支持单/双引号的class属性）
const replaceHtmlClasses = (htmlString) => {
  return htmlString.replace(/class=(['"])([^'"]+)\1/g, (match, quote, classes) => {
    const replacedClasses = classes.split(' ')
      .filter(cls => cls.trim()) // 过滤空类名
      .map(cls => classMapping[cls] || cls) // 有映射则替换，无映射保留原类名
      .join(' ');
    return `class=${quote}${replacedClasses}${quote}`;
  });
};

// 渲染时使用处理后的HTML
<div dangerouslySetInnerHTML={{ __html: replaceHtmlClasses(data) }} />

3. 额外优化与注意事项 #

• 若数据库类名频繁变动，需同步维护classMapping；如果类名数量极多，可通过遍历low对象自动生成映射（前提是CSS Modules类名与数据库类名完全一致）：

  // 自动生成映射（将CSS Modules驼峰类名转回原始连字符格式）
  const classMapping = Object.fromEntries(
    Object.entries(low).map(([key, value]) => {
      const originalClass = key.replace(/([A-Z])/g, '-$1').toLowerCase();
      return [originalClass, value];
    })
  );
  

• 该方法完全依托CSS Modules的样式隔离特性，不会与其他组件的全局样式产生冲突。

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