React中CSS样式重叠问题咨询：同名类选择器异常生效

这是正常现象，核心原因是Web端和React Native的样式作用域机制完全不同：

• Web环境下的CSS默认是全局作用域。不管你在哪个组件（比如CarPage.tsx）里导入.css文件，打包构建后这些样式都会被合并到全局样式表中，整个项目里所有匹配到该class的元素都会应用这个样式。哪怕BikePage.tsx没导入对应的CSS，只要元素设置了同名class，就会被全局样式影响。如果两个同名class的样式规则冲突，最终生效的是打包时后加载的那一份（或优先级更高的规则）。
• 而你之前用的React Native，样式是模块化局部作用域，每个组件的样式只会作用于当前组件内部的元素，不会污染全局，所以不会出现这种跨组件样式复用或冲突的情况。

如果想避免这种全局样式冲突，可以试试这些方案：

1. CSS Modules：把.css文件命名为[文件名].module.css，导入时用import styles from './xxx.module.css'，通过styles.container引用class。打包时每个class会被自动加上唯一前缀，确保只作用于当前组件。
2. CSS-in-JS：比如使用styled-components、Emotion这类库，写法和React Native类似，样式与组件绑定，天然具备局部作用域。
3. 手动添加独特前缀：给不同页面的class加专属前缀，比如car-container、bike-container，从命名上直接避免冲突。

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