React渲染后端HTML时Sass样式不生效的解决方案咨询

问题场景 #

通过以下代码渲染后端返回的HTML内容时，外层.right类的样式正常生效，但后端HTML中自带的.description、.login-card等类对应的Sass样式完全不生效：

const description = serviceGuide?.data?.[0]?.serviceGuideContent;
const htmlContent = { __html: description };

<div className="right" dangerouslySetInnerHTML={htmlContent}/>

解决方法 #

• 禁用CSS模块化（若启用）
  如果你的Sass文件是以模块化方式引入的（例如import styles from './xxx.module.scss'），React会自动为类名添加唯一哈希前缀，导致后端返回的原始类名无法匹配。此时只需改为全局引入：

  import './xxx.scss'
  

  类名将保持原始状态，就能和后端HTML中的类名对应上。

• 使用:global()标记局部样式
  如果你不想放弃CSS模块化，可以在Sass中给需要匹配后端HTML的类添加:global()包裹，避免类名被哈希修改：

  .right {
    /* 外层样式 */
    :global(.description) {
      /* 内部.description的样式 */
      color: #333;
      line-height: 1.6;
    }
    :global(.login-card) {
      /* 内部.login-card的样式 */
      padding: 16px;
      border: 1px solid #eee;
    }
  }
  

• 应急方案：内联样式（不推荐）
  若后端可以修改返回的HTML内容，让后端直接把样式写在元素的style属性中，这种方式无需依赖外部样式表，但不利于样式的统一维护，仅适合简单场景。

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