Styling Components: A Guide to React CSS and Modular Design

Previously in this course, we discussed Creating Static Components: Building Your First React UI Layout. Now that we have our basic UI structure in place, it’s time to move beyond raw HTML elements. This lesson adds visual polish to our movie-browser app by teaching you how to apply CSS, manage classes, and adopt modular styling practices that keep your codebase clean.

The Foundation of Component Styling

In traditional web development, you might be used to having one massive style.css file that grows uncontrollably as your project expands. In React, we shift our mindset to align with Introduction to Component-Based Architecture in React.

If a component is a self-contained unit of functionality, its styles should ideally live close to that component. By the end of this lesson, you will be able to map specific styles to specific components, making your UI predictable and easy to maintain.

Applying CSS to Components

React uses standard CSS, but there is one major syntax difference you must remember: The class attribute in HTML is className in JSX. Because class is a reserved keyword in JavaScript, React requires this camelCase alternative.

Step 1: Linking a Stylesheet

To start, create a file named MovieCard.css in your src/components folder.

CSS
#9CDCFE">color:#6A9955">/* src/components/MovieCard.css */
color:#4EC9B0">.movie-card {
  #9CDCFE">border: 1px solid #ddd;
  #9CDCFE">border-radius: 8px;
  #9CDCFE">padding: 16px;
  #9CDCFE">margin: 10px;
  #9CDCFE">width: 200px;
  #9CDCFE">box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#9CDCFE">color:#4EC9B0">.movie-title {
  #9CDCFE">font-size: 1.2rem;
  #9CDCFE">color: #333;
}

Now, import this file directly into your MovieCard.jsx component file.

JSX
// src/components/MovieCard.jsx
import CE9178">'./MovieCard.css';

function MovieCard() {
  return (
    <div className="movie-card">
      <h2 className="movie-title">Inception</h2>
      <p>A mind-bending thriller.</p>
    </div>
  );
}

export default MovieCard;

When you import the CSS file this way, your bundler (Vite, which we set up in our earlier lesson on Setting Up with Vite) ensures that these styles are injected into the document head, applying them to the rendered output.

Modular Component Styling

While importing a CSS file works, it still puts styles into the global scope. If you have two components that both use the class .title, they will conflict. To solve this, we often use CSS Modules.

A CSS Module is a file ending in .module.css. When you import it, React treats the class names as unique identifiers.

1. Rename MovieCard.css to MovieCard.module.css.
2. Update your import and usage:

JSX
import styles from CE9178">'./MovieCard.module.css';

function MovieCard() {
  return (
    <div className={styles.movieCard}>
      <h2 className={styles.movieTitle}>Inception</h2>
    </div>
  );
}

By using styles.movieCard, the bundler automatically generates a unique class name like MovieCard_movieCard__a1b2c, preventing any style leakage across your application.

Hands-on Exercise

It's time to style the layout we built previously:

1. Create a Header.module.css file.
2. Add styles to make the header have a dark background (#282c34) and white text.
3. Apply these styles to your Header component using the className attribute and the imported styles object.
4. Verify the changes in your browser.

Common Pitfalls

• Forgetting className: Beginners often reflexively type class="header". React will log a warning in your console, and the styles simply won't apply.
• Global Style Pollution: Avoid writing selectors like div { ... } in your CSS files. These are global and will affect every div in your entire application. Always scope your styles to specific classes.
• Layout Jank: If you notice elements jumping around as the page loads, ensure your CSS is bundled correctly. If you encounter performance issues due to complex animations, remember to check for Forced Synchronous Layout: How to Fix Reflow Bottlenecks.

Recap

In this lesson, we moved from raw JSX to a styled UI. We learned that:

• CSS is linked via standard imports at the top of component files.
• className is the required attribute for applying CSS classes in JSX.
• CSS Modules provide a powerful way to avoid style collisions by scoping classes to individual components.

By organizing your styles alongside your logic, you're building a scalable architecture that will make your movie-browser app feel like a production-grade application.

Up next: We will begin making our components dynamic by learning how to pass data using props.