如何让CSS样式表仅作用于单个React购物车组件？

普通方式引入的CSS没有自动隔离能力，构建工具会直接将其挂载为全局样式表，导致样式渗透到所有页面。可以通过以下两种常用方案实现购物车样式的作用域隔离：

方案1：使用CSS Module（主流React构建工具原生支持，零额外配置） #

• 把购物车专属的index.css重命名为CartScreen.module.css，和CartScreen组件放在同一目录。
• 组件内的引入语句从import './index.css'改成import styles from './CartScreen.module.css'
• 把组件JSX里的类名绑定，改成从styles对象读取的形式：
  比如原来写的<div className="row top"> 调整为 <div className={${styles.row} ${styles.top}}>
  原来的<img className="small"> 调整为 <img className={styles.small}>
• 工具会在构建时自动给每个类名加上唯一的哈希后缀（比如.row会被编译为.row_7x2f9k），从根源上避免和其他页面的同名类产生冲突，样式只会作用于当前购物车组件内部。
• 注意：如果你的购物车CSS里有针对body、html这类全局元素的规则，需要把这类规则挪到公共全局CSS里，否则会被CSS Module做哈希隔离，失去全局生效的效果。

方案2：根节点命名空间包裹（改动量最小，适合快速适配老项目） #

• 给购物车组件的最外层根节点加一个全局唯一的类名，比如在现有最外层div的类中追加cart-page-wrap：
  <div className="row top cart-page-wrap">
• 打开存放购物车样式的index.css，把所有购物车专属的CSS规则，全部套上这个唯一类的选择器前缀：
  比如原来写的.col-2 { width: 66%; } 改成 .cart-page-wrap .col-2 { width: 66%; }
  原来写的.small { max-width: 50px; } 改成 .cart-page-wrap .small { max-width: 50px; }
• 这套写法的本质是把样式的生效范围限定在cart-page-wrap的子元素内，其他页面哪怕有同名的.col-2、.small类，因为没有对应的父级匹配，不会加载到购物车的样式规则。
• 这套方案的优势是完全不用改动组件里已经写好的类名逻辑，只需要调整CSS文件的选择器层级，适配成本非常低。

补充注意事项 #

• 不要用手动在useEffect里插入、移除style标签的方式做隔离，一旦组件出现异常卸载的情况，很容易残留全局样式，长期维护成本很高。
• 如果项目已经做了路由级懒加载，搭配上面任意一种隔离方案，购物车的CSS会被拆成独立的加载chunk，只有访问购物车页面时才会加载对应的样式，不会拖慢其他页面的加载速度。
• 跨页面通用的公共样式，本来就应该放在全局公共CSS文件里，不要放在购物车专属的样式文件中，避免重复定义造成样式覆盖。

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