CSS in React - What Really Happens When You Import Styles And How to Keep Them Scoped-

Default CSS Behavior in React (Global CSS):
When you import a .css file like this (anywhere in your code)

import './App.css';

That CSS is applied globally across your React application.
Why? because CSS files are simply stylesheets , once they are loaded the browser applies them globally to all matching selectors in the DOM , ( even if you import ComponentA.css inside ComponentA, the styles can still "leak" into ComponentB if they share class names or tag selectors.)

Then Why Import CSS at the Component Level?
Purely for organization and developer clarity.(This makes it easier to find and manage styles related to each component, even though technically the styles are still global.)

Isolated CSS: How to Prevent Style Leakage

But can we scope css to a specific component , so it does not affect the rest of the app?? The answer is YES.

1. CSS Modules (Recommended & Simple): CSS Modules allow you to write CSS that’s scoped to the component where it's imported. Instead of global class names, they generate unique class names automatically — so there are no naming conflicts or style leaks.

You rename your file to :

Button.module.css

Then in your React component:
`
import styles from './Button.module.css';

function Button() {
return Click Me;
}`

Now, styles.primary is a unique, scoped class name (e.g., _Button_primary_abc12388) generated automatically.

1. Styled Components / Emotion (CSS-in-JS):

Styled Components is a popular CSS-in-JS library. It lets you write CSS inside your JavaScript and attach it directly to components. Styles are scoped automatically and can dynamically change based on props, themes, etc.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
`;

function App() {
  return <Button>Click Me</Button>;
}

Key Insight:
In default React setup, all imported CSS is global, even if you import it inside a component. Use CSS Modules or CSS-in-JS to isolate styles.