问题:React 组件 import 'xxx.css' 为全局副作用,组件卸载后样式不会自动移除,可能影响其他组件。
原因
- 构建产物将 CSS 打包注入文档(link/style),生命周期不随组件销毁。
规避
- 使用 CSS Module/局部作用域(命名隔离)。参见 Css module 模块化。
- 使用 CSS-in-JS(样式按组件作用域生成类名)。
- 限制选择器范围,避免全局通配或宽选择器。
- 动态加载/卸载样式:按需插入 /
提示
- 第三方库的全局样式应集中入口引入,避免在子组件分散引入导致不可控副作用。