React CSS Styling

React CSS Styling: CSS Modules, Inline Styles, & Styled Components

React provides multiple flexible approaches for styling web applications, ranging from traditional CSS stylesheets to component-scoped CSS Modules and CSS-in-JS solutions.

Styling Methodologies Overview

flowchart TD
    Styling["React Styling Options"] --> Regular["Regular Global CSS"]
    Styling --> Modules["CSS Modules (.module.css)"]
    Styling --> Inline["Inline Style Objects"]
    Styling --> CSSinJS["CSS-in-JS (Styled-Components / Emotion)"]

1. CSS Modules (Scoped Styles)

CSS Modules dynamically scope class names to prevent global CSS name collisions across different components.

Button.module.css

.primaryButton {
  background-color: #2563eb;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
}
.primaryButton:hover {
  background-color: #1d4ed8;
}

Button.jsx

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

export default function PrimaryButton({ children, onClick }) {
  return (
    <button className={styles.primaryButton} onClick={onClick}>
      {children}
    </button>
  );
}

2. Inline Style Objects

Inline styles are written as JavaScript objects using camelCase style properties:

export function AlertBox({ message, isError }) {
  const boxStyle = {
    padding: '1rem',
    borderRadius: '8px',
    backgroundColor: isError ? '#fee2e2' : '#dcfce7',
    color: isError ? '#991b1b' : '#166534',
    border: `1px solid ${isError ? '#f87171' : '#4ade80'}`,
  };

  return <div style={boxStyle}>{message}</div>;
}

Style Pattern Trade-Offs

Approach	Class Name Scoping	Performance	Dynamic Styling
Global CSS	Global (Risky collisions)	Excellent	Requires CSS class switching
CSS Modules	Localized per file	Excellent	Standard CSS class toggles
Inline Styles	Scoped per element	Moderate (No pseudo-classes like :hover)	Instant via JS variables
Tailwind CSS	Utility-first classes	Excellent (Pure CSS build)	Class concatenation (clsx)

Best Practices & Gotchas

• Prefer CSS Modules or Utility Frameworks: CSS Modules and utility frameworks (Tailwind CSS) avoid global selector collisions while keeping bundle sizes lean and performant.
• Avoid Inline Styles for Complex Design: Inline styles cannot support CSS pseudo-classes (:hover, :focus), keyframe animations, or media queries natively.

Self-Check Challenge

Create a CSS Module file Card.module.css with .cardContainer styles and import it into a React component.