如何解决React Bootstrap与自定义CSS的样式冲突问题

• 优先调整引入顺序+提升自定义CSS选择器优先级
  首先保持Bootstrap样式的引入语句放在所有自定义CSS引入语句之前，这样相同优先级的样式下，你的自定义样式会默认覆盖Bootstrap样式。如果调整顺序后还是失效，核心原因是Bootstrap内置样式的选择器优先级高于你写的自定义样式，和引入顺序无关。比如你原来的自定义样式写的是.custom-card {border-radius: 8px}，可以改为增加父级限定#root .custom-card {border-radius: 8px}，优先级就能超过Bootstrap的同类型样式；非全局通用的特殊样式可以临时加!important强制生效，不推荐大范围使用。
• 用CSS Module隔离样式
  把你的自定义样式文件重命名为[名称].module.css（比如index.module.css），引入方式改为import styles from './index.module.css'，给元素绑定类名时使用className={styles.customClass}的格式，打包后会自动生成带唯一哈希后缀的类名，完全不会和Bootstrap的原生类名产生冲突。
• 按需引入Bootstrap样式
  不要直接引入全量的bootstrap/dist/css/bootstrap.min.css，改用Sass版本的Bootstrap，只引入你实际用到的组件样式：

// 只引入需要的bootstrap组件样式
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/buttons"; // 只引按钮样式
@import "~bootstrap/scss/grid"; // 只引网格系统

也可以直接修改Bootstrap的scss变量，避免和你的自定义设计规范冲突，从根源减少样式重叠。

• 覆盖Bootstrap全局重置规则
  如果是Bootstrap自带的全局样式重置（比如默认的margin、padding、font-family重置）导致的全局样式失效，可以在自定义CSS的最开头写更高优先级的全局重置规则，直接覆盖Bootstrap的默认值即可。

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