react应用中，css样式默认是全局作用域的，这可能导致一个组件定义的样式（如body背景色）意外地影响到其他未导入该css的组件，尤其是在路由切换时。本文将深入探讨react中css全局作用域的原理，并提供两种有效的解决方案：使用css modules实现样式局部化，以及通过采用独特的命名约定来避免样式冲突，从而确保组件样式的隔离性与可维护性。此外，还将针对body等特殊全局元素的样式管理给出具体策略。

引言：React中CSS样式意外继承的根源

在React开发中，开发者有时会遇到一个令人困惑的问题：当一个组件（例如Welcome组件）为body元素设置了背景样式后，即使导航到另一个完全不导入该CSS的组件（例如ContactUs组件），body的背景样式依然会保留。只有在全新打开的标签页中直接访问ContactUs组件时，背景才不会出现。这种现象并非React特有，而是源于传统CSS的全局作用