React CSS Styling

React CSS styling can be done in several ways depending on your preferences, project complexity, and performance needs.

1. CSS Stylesheets (External .css files)

Write styles in a separate .css file and import it.

/* App.css */
.title {
  color: blue;
  font-size: 24px;
}

// App.jsx
import './App.css';

function App() {
  return <h1 className="title">Hello, World!</h1>;
}

2. Inline Styling

Styles are written directly in the component using a JS object.

function App() {
  const titleStyle = {
    color: 'red',
    fontSize: '20px'
  };

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

3. CSS Modules

Scoped styles using filename.module.css to avoid class name conflicts.

/* App.module.css */
.title {
  color: green;
  font-weight: bold;
}

// App.jsx
import styles from './App.module.css';

function App() {
  return <h1 className={styles.title}>Hello, World!</h1>;
}

4. Styled Components (CSS-in-JS)

Uses the styled-components library. Ideal for component-based design.

npm install styled-components

import styled from 'styled-components';

const Title = styled.h1`
  color: purple;
  font-size: 28px;
`;

function App() {
  return <Title>Hello, World!</Title>;
}

Which one to use?

Approach	Best For
CSS Stylesheets	Simple projects
Inline Styles	Dynamic styles or quick prototypes
CSS Modules	Scoped styling in medium projects
Styled Components	Large apps with reusable components