How to Add Global Styles in React: Simple Methods Explained

To add global styles in React, you can import a CSS file directly into your root component or use a library like styled-components with its createGlobalStyle helper. This applies styles globally across your app without needing to add styles in every component.

Syntax

There are two common ways to add global styles in React:

• Importing a CSS file: Import a CSS file in your root component (e.g., App.js) using import './styles.css';. This applies styles globally.
• Using styled-components: Use createGlobalStyle from styled-components to define global CSS inside your JavaScript and include it in your app.

javascript

/* Importing CSS file in App.js */
import './global.css';

/* Using styled-components */
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>Your app content</div>
    </>
  );
}

export default App;

Example

This example shows how to add global styles by importing a CSS file and using styled-components in a React app.

javascript

/* global.css */
body {
  background-color: #f0f0f0;
  color: #333;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* App.js */
import React from 'react';
import './global.css';
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  h1 {
    color: #007acc;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Hello, global styles!</h1>
      <p>This text uses styles from the imported CSS file.</p>
    </>
  );
}

export default App;

Output

A page with a light gray background, dark text, and a blue heading that says "Hello, global styles!" followed by a paragraph with default styled text.

Common Pitfalls

• Forgetting to import the CSS file in your root component means styles won't apply globally.
• Using CSS modules or scoped styles only applies styles locally, so global styles won't affect other components.
• When using styled-components, forgetting to include the <GlobalStyle /> component in your app will prevent global styles from applying.
• Overriding global styles unintentionally by local component styles can cause confusion; use specificity carefully.

javascript

/* Wrong: CSS file not imported, styles won't apply globally */
// No import './global.css'; in App.js

/* Right: Import CSS file in root component */
import './global.css';

/* Wrong: styled-components global style defined but not used */
const GlobalStyle = createGlobalStyle`body { margin: 0; }`;

function App() {
  return <div>Content</div>;
}

/* Right: Include GlobalStyle component */
function App() {
  return (
    <>
      <GlobalStyle />
      <div>Content</div>
    </>
  );
}

Quick Reference

• Import CSS file: Add import './styles.css'; in your root React component.
• Styled-components global style: Use createGlobalStyle and include the component in your app.
• CSS Modules: Use for scoped styles, not global.
• Remember: Global styles affect all components, so use them for base styling like fonts and body background.

Key Takeaways

Import a CSS file in your root component to apply global styles easily.

Use styled-components' createGlobalStyle for JavaScript-based global CSS.

Always include the global style component in your React tree when using styled-components.

Avoid mixing scoped CSS modules with global styles for base styling.

Global styles are best for fonts, backgrounds, and resets affecting the whole app.