How to Style React Components

In this lesson, we are going to discuss how to add CSS styles to our React app. Take a look inside the src directory, and you'll notice the following structure:

1.
2├── README.md
3├── index.html
4├── package-lock.json
5├── package.json
6├── public
7│   └── vite.svg
8├── src
9│   ├── App.css    <===
10│   ├── App.jsx    <===
11│   ├── assets
12│   ├── index.css
13│   └── main.jsx
14└── vite.config.js

External CSS files

By default, the project is organized in a way so that each component has a corresponding CSS file. This arrangement ensures that each component imports only the CSS styles it needs.

For example, take a look at the App.css and App.jsx. This is where you define the styles specifically for the App component.

App.css

1#root {
2  max-width: 1280px;
3  margin: 0 auto;
4  padding: 2rem;
5  text-align: center;
6}
7
8.logo {
9  height: 6em;
10  padding: 1.5em;
11  will-change: filter;
12  transition: filter 300ms;
13}
14. . .

Inside the the corresponding App.jsx file, we need to import this App.css file at the top to apply these styles to our component.

App.jsx

1import "./App.css";