5 Ways to Import CSS File in React App

While working with React when it comes to styling the components, we might wonder that which approach is best for our project.

In this guide, you will five different ways to import and use CSS style in React application.

We will cover the traditional method of importing a global CSS file, using CSS modules, styled components, Emotion, and inline styling.

By the end of this article, you will have a clear understanding of the different ways to style your React components and will be able to implement the most suitable method for your project.

How to Import CSS in React Project?

Here are the 5 ways to import CSS files and style React components:

• Method 1: Importing CSS as a global file
• Method 2: Using CSS Modules
• Method 3: Styled-components library
• Method 4: Emotion library
• Method 5: Inline styling

Method 1: Importing CSS as a global file

1. Create the CSS file

First, create a new CSS file in your project’s src directory. Let’s name it globalStyles.css:

/* src/globalStyles.css */
.myHeading {
  font-size: 24px;
  color: blue;
}

2. Import the CSS file in the index.js file

Now, import the CSS file in your src/index.js file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './globalStyles.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Method 2: Using CSS Modules

1. Create a CSS module file

Create a new CSS file in your component’s directory and name it with the .module.css extension. For example, styles.module.css:

/* src/components/styles.module.css */
.heading {
  font-size: 24px;
  color: green;
}

2. Import the CSS module in the React component

Import the CSS module in your React component and apply the styles:

// src/components/MyComponent.js
import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return <h1 className={styles.heading}>Hello, World!</h1>;
};

export default MyComponent;

Method 3: Styled-components library

1. Install styled-components

First, install the styled-components library using npm or yarn:

npm install styled-components
yarn add styled-components

2. Create a styled component

Create a new styled component using the styled-components library:

// src/components/StyledHeading.js
import styled from 'styled-components';

const StyledHeading = styled.h1`
  font-size: 24px;
  color: purple;
`;

export default StyledHeading;

3. Use the styled component in the React component

Import and use the styled component in your React component:

// src/components/MyComponent.js
import React from 'react';
import StyledHeading from './StyledHeading';

const MyComponent = () => {
  return <StyledHeading>Hello, World!</StyledHeading>;
};

export default MyComponent;

Method 4: Emotion library

1. Install Emotion

First, install the necessary Emotion packages using npm or yarn:

npm install @emotion/react @emotion/styled
yarn add @emotion/react @emotion/styled

2. Create an Emotion style

Create a new Emotion style using the @emotion/styled package:

// src/components/EmotionHeading.js
import styled from '@emotion/styled';

const EmotionHeading = styled.h1`
  font-size: 24px;
  color: orange;
`;

export default EmotionHeading;

3. Apply the Emotion style to the React component

Import and use the Emotion style in your React component:

// src/components/MyComponent.js
import React from 'react';
import EmotionHeading from './EmotionHeading';

const MyComponent = () => {
  return <EmotionHeading>Hello, World!</EmotionHeading>;
};

export default MyComponent;

Method 5: Inline styling

1. Create an inline style object

Create an inline style object in your React component:

// src/components/MyComponent.js
const inlineStyle = {
  fontSize: '24px',
  color: 'red',
};

2. Apply the inline style to the React component

Apply the inline style object to the element in your React component:

// src/components/MyComponent.js
import React from 'react';

const MyComponent = () => {
  const inlineStyle = {
    fontSize: '24px',
    color: 'red',
  };

  return <h1 style={inlineStyle}>Hello, World!</h1>;
};

export default MyComponent;

Conclusion

In this article, we discussed five different methods to import CSS files into your React application: global CSS files, CSS modules, styled-components, Emotion, and inline styling.

Each method has its advantages and drawbacks, so choose the one that best fits your project’s requirements.