使用class前缀模式配合CSS Module开发时样式不生效如何解决？

问题本质 #

你当前使用的clsPrefix拼接类名的方案确实原生不适配CSS Module。原因是CSS Module会为每个独立声明的类名生成带唯一哈希的字符串，你传入的styles.item本身已经是编译后的哈希值，后续拼接__div1得到的字符串不存在于编译后的CSS类名列表中，自然无法生效。 #

可行解决方案 #

• 方案1：调整组件props设计，双模式兼容（推荐）
  组件新增classNames可选参数，优先使用传入的映射类名，同时保留旧的clsPrefix逻辑做降级兼容，代码示例：
  修改后的组件代码：

  const Example = ({
    clsPrefix = '',
    classNames?: {
      div1?: string,
      div2?: string
    }
  }: props) => {
    return (
      <>
        <div className={classNames?.div1 || `${clsPrefix}__div1`}>div 1</div>
        <div className={classNames?.div2 || `${clsPrefix}__div2`}>div 2</div>
      </>
    )
  }
  

  CSS Module场景下的使用方式：

  <Example 
    classNames={{
      div1: styles.item__div1,
      div2: styles.item__div2
    }}
  />
  

  该方案的优势是完全兼容旧的全局CSS使用方式，存量代码无需修改，新的CSS Module场景也能正常适配。
• 方案2：过渡期临时兼容，使用:global标记跳过哈希编译
  如果暂时不想修改组件代码，可以在CSS Module中用:global将相关类名标记为全局类，跳过CSS Module的哈希编译，保留原有类名结构：

  /* css module */
  :global(.item) {
    &__div1 {
      /* 样式定义 */
    }
    &__div2 {
      /* 样式定义 */
    }
  }
  

  调用组件时依然沿用原有写法即可：

  <Example clsPrefix="item"/>
  

  该方案的劣势是标记为global的类名依然存在全局命名冲突的风险，只适合迁移过渡期临时使用。

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