如何不使用内联样式覆盖React Bootstrap的CSS样式？

• 提高CSS选择器权重
  利用CSS优先级规则，叠加选择器提升权重即可覆盖默认样式。比如给目标Alert组件添加自定义类名，将自定义类与React Bootstrap默认的类名组合编写样式，两个类选择器的权重（20）高于单个默认类的权重（10），无需!important即可生效。
  示例代码：
  组件逻辑：

  import Alert from 'react-bootstrap/Alert';
  import './custom-styles.css';
  
  function Demo() {
    return <Alert variant="warning" className="custom-alert">提示内容</Alert>
  }
  

  自定义CSS（custom-styles.css）：

  .custom-alert.alert {
    padding: 24px 18px; /* 覆盖默认padding */
    border-left-width: 4px;
  }
  

• 调整样式文件引入顺序
  全局样式场景下，确保先引入React Bootstrap的官方样式文件，再引入你自己编写的自定义样式文件。同等优先级的选择器，后引入的样式会覆盖先引入的样式。
  示例引入顺序：

  // 入口文件优先引入Bootstrap样式
  import 'bootstrap/dist/css/bootstrap.min.css';
  // 再引入自定义全局样式
  import './global.css';
  

• 使用CSS Modules
  如果项目开启了CSS Modules能力，可以直接在组件对应的样式模块文件中编写自定义规则，CSS Modules会生成带哈希后缀的唯一类名，天然避免样式冲突，权重也足够覆盖默认样式。
  示例：
  样式文件AlertDemo.module.css：

  .customAlert {
    padding: 12px 16px;
  }
  

  组件逻辑：

  import Alert from 'react-bootstrap/Alert';
  import styles from './AlertDemo.module.css';
  
  function Demo() {
    return <Alert className={styles.customAlert}>提示内容</Alert>
  }
  

• 嵌套父级选择器
  如果是局部页面内的组件样式覆盖，可以给当前页面的父容器添加唯一类名，通过父级类名嵌套目标组件选择器提升权重：

  .user-setting-page .alert {
    padding: 16px;
  }
  

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