React中导入Bootstrap后index.css失效，如何同时使用两者？

你的问题核心是CSS样式优先级冲突：虽然你已经把index.css放在Bootstrap CSS之后导入，但如果自定义样式的选择器权重低于Bootstrap的对应选择器，就会被覆盖。以下是几种可行的解决方式：

• 提升自定义样式的选择器权重
  Bootstrap的很多样式使用了较具体的选择器（比如.container .row、.btn-primary），如果你的自定义样式只用了通用选择器或单一类名，很容易被覆盖。可以通过增加选择器的特异性来解决：
  比如要修改Bootstrap的按钮样式，不要只写：

  .btn-primary {
    background: #ff4400;
  }
  

  而是给根组件添加一个自定义类（比如<div className="app-wrapper">），然后用更具体的选择器：

  .app-wrapper .btn-primary {
    background: #ff4400;
    border-color: #ff4400;
  }
  

  或者结合元素选择器：

  button.btn-primary {
    background: #ff4400;
  }
  

• 谨慎使用!important（应急方案）
  如果不想调整选择器，也可以在自定义样式的属性后加!important强制覆盖，但不推荐大量使用，会增加后续样式维护的复杂度：

  .btn-primary {
    background: #ff4400 !important;
  }
  

• 用浏览器开发者工具排查冲突
  按下F12打开开发者工具，选中目标元素，查看Styles面板：如果你的自定义样式被划掉，说明被更高权重的Bootstrap样式覆盖了。此时可以直接在工具里修改选择器测试，找到合适的权重后再写入index.css。

• 使用CSS Modules（可选）
  如果你的React项目支持CSS Modules，可以将组件样式改为局部作用域，避免全局样式冲突。不过全局的index.css仍需遵循优先级规则。

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