React项目中Bootstrap默认样式覆盖自定义CSS问题求助

• 提升选择器优先级：给自定义样式的元素加更具体的类名或层级，比如把.title改成.app-wrapper .page-title；紧急情况可以用!important强制生效，但尽量少用，避免后续样式维护混乱。
• 用CSS Modules隔离样式：把组件的样式文件命名为[组件名].module.css，导入后样式会被局部作用域化，不会和Bootstrap的全局样式冲突，示例代码：

  import styles from './MyComponent.module.css';
  // 组件内使用：<h1 className={styles.customTitle}>标题</h1>
  

• 重写Bootstrap SCSS变量：如果用的是Bootstrap SCSS版本，在导入Bootstrap前修改它的默认变量，从根源改变样式，示例代码：

  // 先定义自定义变量
  $h1-font-size: 2.8rem;
  $h1-color: #2d3748;
  // 再导入Bootstrap
  @import 'bootstrap/scss/bootstrap';
  

• 确认导入顺序：在index.js里先导入Bootstrap样式，再导入你的全局自定义样式，确保自定义样式能覆盖，示例代码：

  import 'bootstrap/dist/css/bootstrap.min.css';
  import './styles/global.css';
  

• 排查具体冲突规则：打开浏览器开发者工具，查看被修改的标题元素，找到Bootstrap的生效样式，针对性调整自己的选择器。比如Bootstrap用了h1标签选择器，你就给h1加专属类名.my-custom-h1，用类选择器覆盖标签选择器。

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