CSS Modules in Remix - Mini Project: Build & Apply

Styling a Remix Component with CSS Modules

📖 Scenario: You are building a simple user profile card in a Remix app. You want to style the card using CSS Modules to keep styles scoped and avoid conflicts.

🎯 Goal: Create a Remix component called ProfileCard and style it using a CSS Module file named ProfileCard.module.css. The card should have a border, some padding, and a background color.

📋 What You'll Learn

Create a CSS Module file named ProfileCard.module.css with styles for a container class

Create a Remix component named ProfileCard that imports the CSS Module

Apply the CSS Module styles to the container div in the component

Use semantic HTML and accessible markup

💡 Why This Matters

🌍 Real World

CSS Modules help keep styles scoped to components, preventing style conflicts in large Remix apps.

💼 Career

Knowing how to use CSS Modules is important for frontend developers working with Remix or React to build maintainable, scalable UI.

1

Create the CSS Module file with container styles

Create a CSS Module file named ProfileCard.module.css with a class called container. Set the border to 1px solid #ccc, padding to 1rem, and background color to #f9f9f9.

Remix

/* Your CSS Module styles here */

/* Create .container class with border, padding, and background color */

Hint

Use a CSS class selector .container and add the styles inside curly braces.

2

Create the ProfileCard component and import the CSS Module

Create a Remix component named ProfileCard in a file ProfileCard.tsx. Import the CSS Module file ProfileCard.module.css as styles.

Remix

.container {
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: #f9f9f9;
}

// Create ProfileCard component and import styles from './ProfileCard.module.css'
// Your code here

Hint

Use import styles from './ProfileCard.module.css' and create a functional component named ProfileCard.

3

Add the container div with CSS Module class

Inside the ProfileCard component, add a div with the class name set to styles.container. Inside the div, add an h2 with text John Doe and a p with text Web Developer.

Remix

.container {
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: #f9f9f9;
}

import type { FC } from 'react';
import styles from './ProfileCard.module.css';

export const ProfileCard: FC = () => {
  // Add a div with className={styles.container}
  // Inside div, add John Doe and Web Developer
  // Your code here
};

Hint

Use JSX syntax to return a div with className={styles.container} and add the text elements inside.

4

Export the ProfileCard component as default

Change the export of the ProfileCard component to be the default export.

Remix

.container {
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: #f9f9f9;
}

import type { FC } from 'react';
import styles from './ProfileCard.module.css';

// Change export to default export
// Your code here

Hint

Use export default ProfileCard; at the end of the file.