When developing applications in ReactJS, styling plays a crucial role in both the visual appeal and maintainability of your components. React offers a variety of ways to apply styles—from simple inline styles to powerful CSS-in-JS libraries.

In this tutorial, we’ll cover:

• Project structure for scalable styling
• Different styling methods in React
• A hands-on example using CSS Modules
• Tips on choosing the right styling approach

Recommended Project Structure

To keep styles modular and scalable, here’s a clean layout:

my-react-app/
│
├── public/
├── src/
│   ├── assets/
│   │   └── styles/
│   │       ├── variables.css
│   │       └── global.css
│   │
│   ├── components/
│   │   └── Button/
│   │       ├── Button.jsx
│   │       └── Button.module.css
│   │
│   ├── pages/
│   │   └── Home/
│   │       ├── Home.jsx
│   │       └── Home.module.css
│   │
│   ├── App.jsx
│   └── main.jsx
│
├── package.json
└── vite.config.js / webpack.config.js

This structure keeps each component’s styles encapsulated while allowing for global styles when needed.

Popular Styling Approaches in React

Let’s Build a Styled Button Component (Using CSS Modules)

1. Install React App (Using Vite)

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2. Add Global Styles

Create a file at src/assets/styles/global.css:

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

Import this in main.jsx:

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './assets/styles/global.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3. Create a Styled Button Component

src/components/Button/Button.jsx

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

const Button = ({ label, onClick }) => {
  return (
    <button className={styles.primaryButton} onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

src/components/Button/Button.module.css

.primaryButton {
  background-color: #007bff;
  border: none;
  padding: 10px 20px;
  color: white;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.primaryButton:hover {
  background-color: #0056b3;
}

4. Use the Button in a Page

src/pages/Home/Home.jsx

import React from 'react';
import Button from '../../components/Button/Button';
import styles from './Home.module.css';

const Home = () => {
  return (
    <div className={styles.homeContainer}>
      <h1>Welcome to React Styling</h1>
      <Button label="Click Me" onClick={() => alert('Button clicked!')} />
    </div>
  );
};

export default Home;

src/pages/Home/Home.module.css

.homeContainer {
  text-align: center;
  padding: 2rem;
}

5. Load the Home Page in App

src/App.jsx

import React from 'react';
import Home from './pages/Home/Home';

function App() {
  return <Home />;
}

export default App;

Why Use CSS Modules?

• coped styles—no more class name conflicts!
• Great for medium to large applications
• Simple to configure with tools like Vite or Create React App

Tips for Styling in React

1. Start simple: Use CSS modules or standard CSS before introducing styled-components or Tailwind.
2. Follow naming conventions: Use BEM or camelCase for clarity.
3. Use global styles sparingly: Reserve for base layout, typography, and resets.
4. Component-first mindset: Keep styles close to their logic.

Optional: Adding Tailwind or Styled-Components

If your project grows and you need more utility or flexibility:

• Install Tailwind: npm install -D tailwindcss postcss autoprefixer
• Or use Styled Components: npm install styled-components

You can gradually migrate components without rewriting the entire codebase.

Final Thoughts

React doesn’t enforce any one way to style, which is both freeing and overwhelming. Start with CSS Modules for modularity and upgrade your approach as your project evolves. Regardless of the method, consistency and maintainability should always be your goal.