有什么方法可以避免其他叶级页面和父页面的CSS影响我的React页面？

你遇到的是典型的CSS全局作用域冲突问题，以下是几种改造成本很低的方案，不需要大规模重构类名：

1. 优先推荐：CSS Modules（改造成本最低） #

这个方案几乎不需要修改原有样式代码，只调整引入和类名调用方式即可，绝大多数React脚手架都默认支持：

• 把你的样式文件后缀从.css/.scss改成.module.css/.module.scss，例如Dashboard.css重命名为Dashboard.module.css
• 组件内引入方式从原来的import './Dashboard.css'改成import styles from './Dashboard.module.css'
• 组件里类名调用从className="card-title"改成className={styles.cardTitle}即可

打包工具会自动给所有类名加上唯一哈希后缀，完全隔离不同组件的样式，不会出现全局冲突。

2. 临时快速修复方案 #

如果需要紧急解决问题，不想调整代码结构，可以用这个方案：

• 给每个页面/独立模块的根节点加唯一类名，例如你的订单页根节点加className="order-page-container"，同事的用户页根节点加className="user-page-container"
• 把各自的CSS代码全部嵌套到对应根类名选择器下，例如你原来的样式：

.btn {
  color: red;
}
.card {
  padding: 12px;
}

改成：

.order-page-container .btn {
  color: red;
}
.order-page-container .card {
  padding: 12px;
}

不需要修改组件内的任何类名，只需要给CSS加一层父级限定即可快速解决冲突。

3. 长期迭代方案：CSS-in-JS #

如果后续项目要长期维护，可以接入styled-components或emotion这类CSS-in-JS库，样式直接和组件绑定，天生不会泄露到全局：

import styled from 'styled-components'

// 定义带样式的组件
const Card = styled.div`
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
`

// 业务代码直接调用，不需要额外写类名
function OrderPage() {
  return <Card>订单内容</Card>
}

额外注意事项 #

全局通用样式（比如reset样式、统一的主题变量）单独抽离到一个公共文件引入，其他业务组件不要使用*、body、div这类通用标签选择器写业务样式，避免意外覆盖全局。

内容的提问来源于stack exchange，提问作者Ruvindu Kaushalya Abeywickrama