react-bootstrap自定义CSS样式不生效，该如何排查解决？

你遇到的样式不生效问题是两个核心使用错误导致的，按以下步骤修正即可：

• 错误1：CSS Module使用方式错误
  你使用了Login.module.scss命名格式的文件，属于React内置的CSS Module规范，这类文件里的所有类名会被自动编译为带哈希后缀的唯一类名，避免全局样式污染，直接用className="login-form"无法匹配到编译后的类名。
  修正方法二选一：
  1. 继续使用CSS Module：修改导入和类名写法
     将login.js里的导入代码改为：

  import styles from "./Login.module.scss";
  

  对应Col标签的className改为：

  <Col className={`m-0 ${styles['login-form']}`}>
  

  如果你要在CSS Module里写全局样式（比如你定义的body样式），需要用:global()包裹选择器：

  :global(body) {
    background: #0b739c;
  }
  

  2. 不使用CSS Module：直接把Login.module.scss重命名为Login.scss，原有代码不需要修改，样式会作为全局样式生效。
• 错误2：全局样式引入顺序校验
  你当前在index.js先引入bootstrap的css，再在组件内引入自定义样式的顺序是正确的，后引入的同优先级样式可以覆盖bootstrap的默认样式，无需调整。如果后续有全局覆盖需求，可以单独新建一个全局scss文件，在index.js的bootstrap引入语句之后导入即可。

如果修正后样式仍未生效，重启npm start启动的本地开发服务，重新编译项目即可。

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