CSS Modules in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import CSS Modules correctly in a Remix component.

Remix

import styles from './Button[1]';

Drag options to blanks, or click blank then click option'

A.module.css

B.css

C.style.css

D.module.scss

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain '.css' instead of '.module.css' for CSS Modules.

Confusing SCSS files with CSS Modules.

CSS Modules files in Remix typically use the .module.css extension to enable scoped styles.

2fill in blank

medium

Complete the code to apply a CSS Module class to a button element.

Remix

<button className={styles.[1]>Click me</button>

Drag options to blanks, or click blank then click option'

Abutton

Bcontainer

Cbtn-primary

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class name not defined in the CSS Module.

Forgetting to use styles. prefix.

The CSS Module class name must match the class defined in the CSS file. Here, button is the correct class name.

3fill in blank

hard

Fix the error in the CSS Modules import statement.

Remix

import [1] from './Header.module.css';

Drag options to blanks, or click blank then click option'

Astyle

Bstyles

Ccss

Dmodule

Attempts:

3 left

💡 Hint

Common Mistakes

Using a generic or incorrect variable name that doesn't match usage.

Forgetting to import as an object.

The imported object is conventionally named styles to represent CSS Module classes.

4fill in blank

hard

Fill both blanks to create a CSS Module style object with a dynamic class name.

Remix

const className = styles.[1] + ' ' + styles.[2];

Drag options to blanks, or click blank then click option'

Aactive

Bdisabled

Ccontainer

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using class names that don't exist in the CSS Module.

Forgetting to concatenate with a space.

Combining active and disabled classes from CSS Modules allows dynamic styling.

5fill in blank

hard

Fill all three blanks to create a CSS Module style object with conditional classes.

Remix

const className = styles.[1] + (isActive ? ' ' + styles.[2] : '') + (isDisabled ? ' ' + styles.[3] : '');

Drag options to blanks, or click blank then click option'

Abutton

Bactive

Cdisabled

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of classes.

Not adding spaces between class names.

This code applies the base button class, then conditionally adds active and disabled classes based on state.