React项目中如何避免自定义CSS覆盖其他组件的样式？

有3种常见可落地的方案，按实现成本从低到高排序：

方案1：加专属类名限定CSS作用范围 #

这是改造成本最低的方案，不需要修改项目配置：

1. 给你的AG-Grid外层容器新增一个独有的自定义类名，比如statistics-ag-grid：

<div className="ag-theme-alpine statistics-ag-grid">
  <AgGridReact {/* 原有属性保持不变 */} />
</div>

2. 修改Statistics.css里的选择器，加上专属类名做后代限定，确保只有该组件下的AG-Grid样式会被覆盖：

.statistics-ag-grid .ag-root-wrapper {
    border: solid 0px !important;
    border-color: var(--ag-border-color, white) !important;
}

方案2：直接覆盖AG-Grid主题变量（无需额外写覆盖类） #

AG-Grid的样式完全基于CSS变量控制，你可以直接在外层容器局部覆盖变量，连自定义CSS都不需要写：

<div 
  className="ag-theme-alpine" 
  style={{
    '--ag-wrapper-border-width': '0px',
    '--ag-border-color': 'transparent'
  }}
>
  <AgGridReact {/* 原有属性保持不变 */} />
</div>

这个方案不需要修改你的CSS文件，变量会仅作用于当前容器下的AG-Grid实例，不会影响全局。

方案3：使用CSS Modules实现彻底的样式隔离 #

如果你的项目本身支持CSS Modules（Create React App、Vite等主流脚手架默认支持），可以用这个方案从根本上避免全局样式冲突：

1. 把CSS文件重命名为Statistics.module.css
2. 导入方式改为：

import styles from './Statistics.module.css'

3. 修改外层容器的类名：

<div className={`ag-theme-alpine ${styles.agGridContainer}`}>
  <AgGridReact {/* 原有属性保持不变 */} />
</div>

4. 在Statistics.module.css中写样式：

.agGridContainer .ag-root-wrapper {
    border: solid 0px !important;
    border-color: var(--ag-border-color, white) !important;
}

CSS Modules会自动给自定义类名加上唯一哈希后缀，绝对不会和全局样式冲突。

额外注意：你贴出的代码中组件定义名为Statistics，但最后导出的是Content，属于笔误，记得修正为export default Statistics避免运行报错。

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