为什么React组件内引入的CSS设置会泄漏到其他组件？

你在组件中直接引入普通.css文件出现样式泄漏是React配合前端打包工具的默认行为导致的，核心原因如下：

• 所有通过import "./xxx.css"语法导入的普通CSS文件，都会被Webpack、Vite等打包工具全局收集，最终统一注入到HTML的全局<style>标签中，没有组件级的作用域隔离，所有样式默认全局生效。
• 只要你的CSS选择器能匹配到其他组件的DOM元素，就会自动应用对应样式：比如你写了.title、.container这类通用类名，或者直接用button、p这类标签选择器，其他组件里符合选择器规则的元素都会被影响。
• 不同组件导入的CSS文件的样式优先级由打包后的注入顺序决定，后注入的样式会覆盖先注入的同名选择器样式，进一步放大了样式冲突的概率。

常见的样式隔离方案：可以使用CSS Modules、CSS-in-JS方案（如styled-components）、或者原子化CSS（如Tailwind CSS）来避免全局样式冲突。

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