React中组件CSS文件为何会继承其他CSS文件样式？

Cause #

CSS is inherently global. Even when you split styles into separate files, once they’re imported into your app, all selectors live in the same global scope. If both your navbar.css and hero.css use a generic img selector, the browser will apply the styles from whichever file is loaded later (or has higher specificity if selectors are equally generic). That’s why your hero’s img is picking up the navbar’s styles—there’s no built-in scoping unless you explicitly add it.

Solutions (No Renaming Required) #

• Add Component-Specific Classes
  Ditch the generic img selector and use unique classes for each component’s image. For example:
  In navbar.css:

  .navbar-logo {
    height: 50px;
    width: auto;
  }
  

  In hero.css:

  .hero-banner {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  

  Apply these classes to the respective img tags in your components. This ensures each style targets only its intended element.

• Use CSS Modules
  If you’re using React or a bundler like Webpack, CSS Modules automatically scope styles to the component. Rename your CSS files to navbar.module.css and hero.module.css, then import them as objects:

  // Navbar component
  import styles from './navbar.module.css';
  // ...
  <img src="logo.png" className={styles.logo} />
  
  // Hero component
  import styles from './hero.module.css';
  // ...
  <img src="banner.jpg" className={styles.banner} />
  

  The bundler generates unique class names under the hood, eliminating style conflicts.

• Scoped Styles (Vue/Svelte)
  In Vue, add the scoped attribute to your style tag:

  <style scoped>
    img { /* Only applies to this component's img */ }
  </style>
  

  Svelte does this automatically—styles in a component’s <style> tag are scoped to that component by default.

• Boost Selector Specificity
  If you must keep the img selector, make it more specific by targeting the parent component. For example:
  In navbar.css:

  nav img { /* Only affects imgs inside <nav> */ }
  

  In hero.css:

  .hero-section img { /* Only affects imgs inside .hero-section */ }
  

  More specific selectors override generic ones, even if loaded earlier.

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