JIYIK CN >

To apply global CSS styles in your React application, write the CSS in a file with .css extension and import it in your index.js file.

The global CSS should be imported in index.js to ensure it is loaded on all pages of your React application.

Below is an example of an index.css file that declares 2 globally available classes.

.bg-salmon {
  background-color: salmon;
}

.text-white {
  color: white;
}

Here is how we can import the index.css file in the index.js file .

// 👇️ import css
import './index.css';

import {createRoot} from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <App />
);

The above example assumes that our index.css file is in the same directory as our index.js file.

When importing global CSS files in React, the best practice is to import the CSS file into the index.js file.

The index.js file is the entry point for your React application, so it always runs.

On the other hand, if we import a CSS file into a component, the CSS styles may be removed once our component unmounts.

We can apply global styles in any file.

Here is an example App component that uses these two classes.

const App = () => {
  return (
    <div>
      <div className="bg-salmon text-white">jiyik.com</div>
    </div>
  );
};

export default App;

Applying global CSS styles in React applications using CSS Modules

If you're using CSS Modules to style your React app, you can :globalswitch to the global scope by passing the current selector to .

:global(.bg-salmon) {
  background-color: salmon;
}

If a selector is switched to global mode, it will not be modified by CSS Modules and will be available globally.