为什么React组件卸载时，对应引入的CSS样式没有被移除？

• 常规的import './xxx.css'属于全局样式引入逻辑，React本身没有内置「样式随组件卸载移除」的能力，所有被引用过的CSS文件，都会被你的打包工具（Webpack/Vite等默认配置下）直接注入到页面<head>的样式标签中，只要页面不刷新，这些样式会全局常驻，和对应组件是否挂载、卸载完全无关。
• 同名类.Grid出现覆盖是CSS原生层叠规则导致：后注入到页面的样式优先级更高，你先访问Home页面、再跳转CreatePost页面的场景下，CreatePost的CSS注入顺序更靠后，就算CreatePost组件卸载，它的样式仍存在于全局样式表中，自然会覆盖先注入的Home页同名类样式。

• 方案1：使用CSS Modules（最普适的轻量方案）
  将两个样式文件分别重命名为Home.module.css、CreatePost.module.css，引入方式调整为import styles from './Home.module.css'，给元素加类名时写className={styles.Grid}即可。打包工具会自动给所有类名添加唯一哈希后缀，从根源上避免全局同名类冲突。
• 方案2：使用CSS-in-JS库
  用styled-components、Emotion这类CSS-in-JS方案编写样式，样式和组件实例直接绑定，组件卸载时对应的样式会自动移除，天然规避全局样式冲突问题。
• 方案3：手动添加命名空间
  给每个页面的根节点添加唯一的全局类名，比如Home页根节点加home-root，CreatePost页根节点加create-post-root，调整样式写法为.home-root .Grid {}、.create-post-root .Grid {}，通过父类选择器提高优先级，避免同名类互相覆盖。
• 方案4：配置打包工具实现样式随组件卸载移除
  如果你确实需要路由切换时自动卸载对应页面的样式，可以将路由组件改为懒加载引入，同时配置style-loader的injectType: 'styleTag'、auto: true参数，实现懒加载样式块随组件卸载自动移除，该方案配置成本较高，非特殊需求不推荐。

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