React使用form-group内置类时自定义CSS属性不生效问题

结合你描述的现象，问题通常来源于两类常见的工程配置：

• CSS Modules 类名编译不匹配：你的项目如果开启了CSS Modules能力（即引入的样式文件后缀为.module.css/.module.scss），这类文件中定义的所有类名，都会在编译阶段被自动拼接唯一哈希后缀，生成类似_form-group_3f8d1的隔离类名。你在JSX中直接写的className="form-group"是不带哈希的全局类名，无法匹配编译后的隔离类，因此自定义样式完全不会生效；而你使用的classes.form是CSS Modules导出的类名映射对象，能正确匹配对应的隔离类，所以样式可以正常加载。这种场景下，开发者工具面板中根本看不到你编写的自定义.form-group规则。
• 样式加载顺序导致优先级覆盖：如果你编写的是不带模块化标识的全局样式，但自定义样式文件的引入位置早于框架内置的.form-group.scss文件，相同优先级的单类名选择器会遵循「后加载覆盖先加载」的浏览器默认规则，你的自定义样式会被框架默认样式直接覆盖。这种场景下，开发者工具中能看到你的自定义规则，但规则会被标记删除线说明已被覆盖。

可根据实际原因对应选择操作：

• 针对CSS Modules类名匹配问题：
  • 若不需要样式隔离：新建一个不带.module后缀的全局样式文件，将.form-group的自定义规则写入该文件，在项目入口或当前页面引入即可。
  • 若要在现有模块化样式文件中编写全局类规则：使用CSS Modules的:global()语法包裹需要匹配全局类的规则，写法参考：

    :global(.form-group) {
      margin-bottom: 0.2rem;
      margin-top: 0.2rem;
    }
    

    编译时该类名不会被拼接哈希，可直接匹配JSX中写的原生form-group类。
• 针对样式被覆盖的问题：
  • 调整自定义样式文件的引入顺序，将其移到框架内置样式的引入代码之后，让同优先级的自定义规则最后加载，自然覆盖默认样式。
  • 如果调整顺序后仍存在覆盖问题，可通过适度提升选择器权重解决（如写为.form-group.form-group），尽量避免直接使用!important提升权重，减少后续维护成本。

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