CSS Stylesheet

You can create your CSS styling in a separate .css file and import it into your React application.

App.css:

Create a new file named App.css and add your CSS code to it.

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

Note: You can name the file anything you like, just make sure to use the correct .css extension.

Import the stylesheet into your application.

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

CSS Modules

Another method for adding styles to your application is using CSS Modules, which are ideal for styling components in separate files.

CSS inside a module is scoped only to the component that imports it, eliminating concerns about name conflicts.

Create the CSS module with the .module.css extension, for example: my-style.module.css.

Create a new file named my-style.module.css and add your CSS code to it.

my-style.module.css:

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

Import the stylesheet into your component.

Car.js:

import styles from './my-style.module.css'; 

const Car = () => {
  return <h1 className={styles.bigblue}>Hello Car!</h1>;
}

export default Car;

Import the component into your application.

index.js:

import ReactDOM from 'react-dom/client';
import Car from './Car.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);