React开发中如何让传入的className prop优先级高于组件默认类样式？

你当前遇到的自定义样式无法覆盖默认样式的问题，本质是两个常见误区和实际构建的样式加载逻辑共同导致的：

• 相同权重的类选择器，优先级判定和你在DOM的className属性里把类写在前还是写在后完全无关。最终的优先级只看两个CSS规则在最终生成的样式表中的物理位置：写在后面的规则会覆盖前面同权重的规则。
• 采用CSS Modules开发组件时，本地开发的style-loader、生产构建的CSS提取插件，往往会把组件自带的样式插入到整个样式表的靠后位置。哪怕你在DOM上把自定义类拼在默认类后面，只要组件默认样式在CSS源码中排在自定义类后面，就会发生反向覆盖。

无!important的可行解决方案 #

• 利用CSS层叠层（@layer）实现优先级隔离
  这是目前最优雅、对组件使用者最友好的方案，完全不需要调整选择器权重，也不会受CSS打包顺序的影响。
  操作方式：
  1. 给组件自带的默认样式套上最低优先级的层，比如在默认样式文件开头声明：

     @layer component-internal-default {
       .defaultButtonStyle {
         background-color: red;
       }
     }
     

  2. 不管组件使用者的自定义类写在哪个位置，只要是在层叠体系外的样式，或者在优先级更高的层中声明的样式，都会天然覆盖组件的默认样式。因为层叠层的优先级完全由声明顺序决定，先声明的层优先级最低，完全不受CSS文件内代码位置的干扰。
• 通过构建配置控制CSS加载顺序
  直接调整源码物理顺序，让组件的默认样式永远排在所有业务自定义样式的前面。同权重的类选择器下，排在后面的业务自定义样式自然会覆盖前面的组件默认样式。
  实际操作中，只需要把组件的样式文件放在项目入口的最顶部引入，把业务自定义的样式文件放在入口靠后的位置引入即可；如果是独立发布的组件库，在打包时配置样式单独抽成静态文件，不要被构建工具把组件样式内联注入到业务页面的样式末尾，就能从根源上避免顺序颠倒导致的覆盖问题。
• 设计合理的选择器权重梯度
  不要把组件默认样式写成没有任何作用域的裸类选择器。可以在组件根元素上加一个无实际视觉效果的专属作用域类，所有默认样式都用这个作用域类搭配默认类写二级选择器（比如.button-scope.defaultButtonStyle），和组件使用者传入的自定义类的二级选择器保持一致权重，再配合样式顺序控制实现覆盖。这种方式可以避免组件默认样式因为权重过低被其他无关的全局样式污染，也不会因为权重过高给使用者造成样式覆盖的困扰。

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