08_React Component Styling - Maniconserve/React-Wiki GitHub Wiki

There are several ways to style React components. Each approach has its own use case.

The most familiar approach — write styles in a .css file and import it into your component.

/* Card.css */
.card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.card-title {
font-size: 24px;
color: #333;
}

// Card.jsx
import './Card.css';

function Card() {
  return (
    <div className="card">
      <h2 className="card-title">Hello</h2>
    </div>
  );
}

✅ Clean separation of concerns — styles stay out of JavaScript.
❌ CSS is global by default — a class named .card in one file affects every element with that class name across the entire app.

Pass a JavaScript object directly to the style attribute. Property names are written in camelCase instead of kebab-case.

function Card() {
  return (
    <div style={{ backgroundColor: 'white', borderRadius: '8px', padding: '20px' }}>
      <h2 style={{ fontSize: '24px', color: '#333' }}>Hello</h2>
    </div>
  );
}

Because styles are JavaScript objects, hyphenated CSS properties become camelCase:

Part of the React Project Wiki — see also: JSX Attributes & Expressions · React Components

There are several ways to style React components. Each approach has its own use case.

The most familiar approach — write styles in a .css file and import it into your component.

/* Card.css */

.card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 24px;
  color: #333;
}

// Card.jsx
import './Card.css';

function Card() {
  return (
    <div className="card">
      <h2 className="card-title">Hello</h2>
    </div>
  );
}

✅ Clean separation of concerns — styles stay out of JavaScript.
❌ CSS is global by default — a class named .card in one file affects every element with that class name across the entire app.

Pass a JavaScript object directly to the style attribute. Property names are written in camelCase instead of kebab-case.

function Card() {
  return (
    <div style={{ backgroundColor: 'white', borderRadius: '8px', padding: '20px' }}>
      <h2 style={{ fontSize: '24px', color: '#333' }}>Hello</h2>
    </div>
  );
}

Because styles are JavaScript objects, hyphenated CSS properties become camelCase:

✅ Scoped to that element — no global conflicts.
✅ Easy to make dynamic using variables.
❌ No support for pseudo-classes like :hover, :focus, or media queries.
❌ Gets messy for large amounts of styling.

Define styles as a JavaScript object outside the JSX, then reference it. Keeps the JSX clean while still using inline style objects.

const styles = {
  card: {
    backgroundColor: 'white',
    borderRadius: '8px',
    padding: '20px',
    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
  },
  title: {
    fontSize: '24px',
    color: '#333',
    marginTop: '0',
  },
  button: {
    backgroundColor: '#0070f3',
    color: 'white',
    padding: '10px 20px',
    borderRadius: '4px',
    border: 'none',
  },
};

function Card() {
  return (
    <div style={styles.card}>
      <h2 style={styles.title}>Hello</h2>
      <button style={styles.button}>Click Me</button>
    </div>
  );
}

✅ All styles in one place, easy to read.
✅ No class name conflicts.
✅ Can reference JavaScript variables and constants.
❌ Still no :hover, :focus, or media queries without a library.

CSS Modules scope styles locally to the component by automatically generating unique class names. The file must be named Component.module.css.

/* Card.module.css */

.card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
}

.title {
  font-size: 24px;
  color: #333;
}

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

function Card() {
  return (
    <div className={styles.card}>
      <h2 className={styles.title}>Hello</h2>
    </div>
  );
}

React transforms .card into a unique class like Card_card__xK2p1 automatically, so it never clashes with any other .card class in the app.

✅ Scoped — no global conflicts even with the same class name.
✅ Supports all CSS features — :hover, media queries, animations.
✅ Best of both worlds — familiar CSS syntax with automatic scoping.
❌ Slightly more setup than a plain CSS file.

Styles written in index.css or App.css (imported in index.js) apply to the entire application.

/* index.css */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  color: #222;
}

h1, h2, h3 {
  font-weight: 600;
}

// index.js
import './index.css'; // applied globally across the entire app

✅ Ideal for resets, base typography, and app-wide defaults.
❌ Affects every component — can cause unintended style collisions.

Inline styles always win over CSS class styles because they have the highest specificity in React.

/* App.css */
.title {
  color: black;
  font-size: 20px;
}

// Inline style overrides the CSS class
<h1 className="title" style={{ color: 'red' }}>Hello</h1>
// color will be red, font-size stays 20px from the class

Combine class names as a string to stack styles. The class that appears later in the CSS file wins when there is a conflict.

/* App.css */
.btn {
  background-color: grey;
  color: white;
  padding: 10px;
}

.btn-primary {
  background-color: blue; /* overrides .btn background */
}

<button className="btn btn-primary">Click</button>
// background will be blue (btn-primary wins), padding stays from .btn

Apply classes conditionally based on state or props.

function Button({ isPrimary }) {
  return (
    <button className={`btn ${isPrimary ? 'btn-primary' : 'btn-secondary'}`}>
      Click Me
    </button>
  );
}