如何使用css modules重定义第三方库中带hash的样式？

优先使用组件内置的样式覆写入口 #

绝大多数基于CSS Modules开发的第三方组件，都会预留className、wrapClassName、classNames这类透传类名的props，支持把外部传入的自定义类名，直接挂载到组件根节点或者指定子节点上。
这种方式是稳定性最高的方案，不需要硬匹配内部带hash的类名，只要给传入的自定义类写对应样式，靠同权重下后加载样式的优先级规则，就能直接覆盖第三方内部样式，也不会因为第三方版本迭代、类名hash变化失效。

无内置入口时，用属性选择器匹配类名固定片段 #

如果组件没有预留透传类名的入口，可以借助CSS Modules的类名生成规则写选择器，不需要记住完整带hash的类名：
CSS Modules默认生成的类名结构为原始类名_随机哈希串，比如组件内部写的原始类是dialogBody，编译输出到浏览器的类名就是dialogBody_x9K2p这类带hash的形式。
只需要打开开发者工具的元素面板，找到对应元素上的类名，提取下划线前面的固定原始类名片段，用属性选择器匹配即可，示例代码：

/* 覆盖原始类名是dialogBody的所有第三方带hash的元素 */
[class*="dialogBody_"] {
  padding: 16px;
  background: #fafafa;
}

这种写法不会因为第三方重新打包生成新的hash值失效，只要组件内部的原始类名没有改动，选择器就能一直匹配到目标元素。

注意：不要直接硬编码完整的带hash类名（比如直接写.dialogBody_x9K2p），这种写法在第三方下次版本迭代、hash值变动后会直接失效，维护成本极高。

常见覆写不生效的排查调整方法 #

带hash的CSS Modules类名本身和普通类名的权重完全一致，出现覆写不生效通常是两个原因：

• 加载顺序问题：确保你写的自定义覆写样式文件，加载顺序在第三方库的样式文件之后。同权重下浏览器会优先应用最后加载的样式规则。
• 权重不足问题：如果无法调整样式加载顺序，可以在属性选择器前叠加项目本身的根节点类名/ID选择器，抬升选择器权重，比如：

  /* 叠加项目根节点#rootID选择器，提高选择器权重 */
  #rootID [class*="dialogBody_"] {
    padding: 16px;
  }
  

  尽量不要全局滥用!important，避免破坏全局样式的权重体系。

构建层定制方案（仅特定场景可用） #

如果你的项目是直接引入第三方库的源码参与本地构建，而不是引入第三方已经预编译完成的dist产物，可以在构建工具的CSS Modules配置中，针对第三方库的目录单独设置localIdentName参数，将类名生成规则改为不携带哈希（比如配置为[local]），此时第三方组件的输出类名就和原始类名完全一致，可以像写全局样式一样直接覆写。
如果第三方库已经是预编译好的带hash产物，这个方案无法生效，不要浪费时间尝试。

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