在 React 中，多个 CSS 文件中同名选择器（如 img）会因全局作用域而相互覆盖或叠加，导致组件样式意外继承；根本解法是采用 CSS Modules 实现样式局部作用域。
在 react 中，多个 css 文件中同名选择器（如 `img`）会因全局作用域而相互覆盖或叠加，导致组件样式意外继承；根本解法是采用 css modules 实现样式局部作用域。
React 默认使用全局 CSS 作用域——无论你将样式定义在 navbar.css、hero.css 还是其他独立文件中，只要它们被导入（例如 import './Navbar.css'; import './Hero.css';），其中的普通选择器（如 img、.container、button）就会被浏览器统一解析并应用到整个 DOM 树中所有匹配元素上。这意味着：
- navbar.css 中写的 img { width: 40px; border-radius: 50%; }
- hero.css 中写的 img { width: 100%; height: auto; object-fit: cover; }
两者会同时生效，最终渲染效果由 CSS 层叠规则（source order、specificity、!important）决定，而非“按组件隔离”。这就是你观察到 hero 区域图片“继承”了 navbar 样式的真实原因——并非继承，而是全局污染与层叠冲突。
✅ 正确解法：启用 CSS Modules（推荐 Create React App 默认支持）
CSS Modules 会在构建时自动将类名哈希化，并仅将样式作用于显式绑定的 JSX 元素，实现真正的作用域隔离。
立即学习“前端免费学习笔记（深入）”；
步骤如下：
- 将样式文件重命名为 Hero.module.css 和 Navbar.module.css；
- 在组件中按模块方式导入：
// Hero.jsx import styles from './Hero.module.css';
function Hero() { return (
/* Hero.module.css */
.heroSection {
padding: 4rem 0;
}
.heroImage {
width: 100%;
height: 60vh;
object-fit: cover;
}/* Navbar.module.css */
.navLogo {
width: 32px;
height: 32px;
}
/* 即使也定义了 img { ... }，它也不会影响 Hero 组件中的 img —— 因为模块内无全局 img 规则 */⚠️ 注意事项：
- 不要混用：避免在模块文件中写全局选择器（如 img、body、*），否则仍会泄漏；
- 类名必须通过 className={styles.xxx} 显式绑定，直接写 className="heroImage" 无效；
- 若需全局重置（如 *, *::before, *::after { box-sizing: border-box; }），请保留在 index.css 或 App.css 中统一管理；
- 第三方库组件样式需额外处理（如 :global(.react-datepicker)），CSS Modules 支持有限穿透语法。
总结：React 本身不提供样式沙箱，CSS 的全局性是 Web 标准行为，而非框架缺陷。拥抱 CSS Modules（或更现代的方案如 Tailwind + @apply、CSS-in-JS）是构建可维护、可复用组件样式的工程共识。从今天起，让每个组件的样式只属于它自己。
