How do I build a React app that uses different .css files for different components?

Setting up a new React app with separate .css files

To get started, let’s create a new React app using the create-react-app CLI tool:

npx create-react-app react-css-components

This will create a new React app called `react-css-components` with the basic file structure.

Step 1: Create a new folder for your components

Create a new folder called `components` inside the `src` directory:

mkdir src/components

Step 2: Create a new component with its own .css file

Inside the `components` folder, create a new folder called `Button`:

mkdir src/components/Button

Now, create a new file called `Button.js` inside the `Button` folder:

touch src/components/Button/Button.js

Add the following code to `Button.js`:

import React from 'react';

const Button = () => {
  return (
    <button>Click me!</button>
  );
};

export default Button;

Create a new file called `Button.css` inside the same folder:

touch src/components/Button/Button.css

Add some basic styles to `Button.css`:

button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

Step 3: Import the CSS file into the component

Update `Button.js` to import the `Button.css` file:

import React from 'react';
import './Button.css';

const Button = () => {
  return (
    <button>Click me!</button>
  );
};

export default Button;

Step 4: Use the component in your app

Open `App.js` and import the `Button` component:

import React from 'react';
import Button from './components/Button/Button';

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

export default App;

Using CSS modules

By default, Create React App uses CSS modules to scope CSS classes to individual components. This means you can use the same class name across different components without conflicts.

In our `Button.css` file, we can use CSS modules by adding the following code:

.button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #3e8e41;
}

Then, in our `Button.js` file, we can import and use the CSS module:

import React from 'react';
import styles from './Button.css';

const Button = () => {
  return (
    <button className={styles.button}>Click me!</button>
  );
};

export default Button;

Using multiple CSS files for a single component

Sometimes, you may need to separate your CSS files for a single component into different files, such as `styles.css` for layout and `theme.css` for theming.

Create a new folder called `Login` inside the `components` folder:

mkdir src/components/Login

Create a new file called `Login.js` inside the `Login` folder:

touch src/components/Login/Login.js

Add the following code to `Login.js`:

import React from 'react';
import styles from './styles.css';
import theme from './theme.css';

const Login = () => {
  return (
    <div className={styles.container}>
      <h2>Login Form</h2>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <button>Login</button>
    </div>
  );
};

export default Login;

Create a new file called `styles.css` inside the same folder:

touch src/components/Login/styles.css

Add some basic layout styles to `styles.css`:

.container {
  max-width: 300px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

Create a new file called `theme.css` inside the same folder:

touch src/components/Login/theme.css

Add some theme-related styles to `theme.css`:

.primary-button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.primary-button:hover {
  background-color: #3e8e41;
}

Best practices for organizing CSS files

Here are some best practices for organizing your CSS files:

• Keep CSS files small and focused**: Try to keep each CSS file focused on a specific component or feature, rather than having a large, monolithic CSS file.
• Use a consistent naming convention**: Use a consistent naming convention for your CSS files, such as `componentName.css` or `featureName.styles.css`.
• Use a modular approach**: Break down your CSS into smaller, modular pieces that can be easily reused across your app.
• Avoid duplicated code**: Avoid duplicating code in multiple CSS files. Instead, create a separate file for shared styles.