引入react-bootstrap依赖CSS后自定义样式被覆盖如何解决

方法1：调整样式引入顺序 #

浏览器对于同权重的CSS规则，后加载的优先级更高。你当前的自定义样式被覆盖，核心原因是通过JS导入的Bootstrap CSS打包后插入顺序晚于你在index.html中引入的自定义样式，有两种调整方式：

• 把自定义样式改为JS导入，放在Bootstrap导入之后

  // 先引入Bootstrap默认样式
  import "bootstrap/dist/css/bootstrap.min.css";
  // 再引入自定义全局样式
  import "./css/style.css";
  

• 把Bootstrap样式也改为index.html的link标签引入，放在自定义样式之前

  <!-- 先引入Bootstrap样式 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 再引入自定义样式 -->
  <link href="%PUBLIC_URL%/css/style.css" rel="stylesheet"/>
  

方法2：提高自定义CSS选择器权重 #

CSS优先级由选择器权重决定，权重越高越优先生效，权重规则：id选择器(100) > 类选择器/属性选择器(10) > 标签选择器(1)。你可以通过叠加选择器的方式提高权重：

• 比如原来的自定义规则是.custom-card { padding: 20px }，可以叠加Bootstrap组件的类名提高权重：.accordion .custom-card { padding: 20px }，权重高于Bootstrap默认的单类选择器规则，会优先生效
• 特殊场景下可临时使用!important强制提高优先级，不建议大量使用：.custom-card { padding: 20px !important }

方法3：使用Scoped样式方案 #

React生态下的局部样式方案可以天然避免全局样式冲突：

• 使用CSS Modules：给样式文件命名为xxx.module.css，导入后生成带哈希后缀的唯一类名，不会和Bootstrap全局类名冲突
• 使用CSS-in-JS方案：比如styled-components、Emotion等，生成的样式规则权重天然高于全局默认样式

方法4：自定义Bootstrap原生变量（最推荐） #

如果需要大量修改Bootstrap默认样式，可以直接修改Bootstrap的Sass变量，从根源上定制样式，不需要后续覆盖：

1. 安装sass依赖：npm install sass --save
2. 新建自定义样式文件custom-bootstrap.scss，提前覆盖变量后再引入Bootstrap源码：

   // 覆盖变量需要放在导入Bootstrap之前
   $primary: #165DFF;
   $accordion-border-radius: 8px;
   $accordion-body-padding-x: 20px;
   
   // 引入Bootstrap Sass源码
   @import "~bootstrap/scss/bootstrap";
   

3. 把原来的Bootstrap CSS导入替换为自定义的scss文件即可：import './custom-bootstrap.scss'

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