CSS Modules in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the CSS module correctly in a Next.js component.

NextJS

import styles from '[1]';

export default function Button() {
  return <button className={styles.btn}>Click me</button>;
}

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

A'./button.css'

B'./Button.module.css'

C'./styles.css'

D'./Button.css'

Attempts:

3 left

💡 Hint

Common Mistakes

Importing a regular CSS file without .module in the name.

Using wrong file path or extension.

You must import the CSS module file with the exact module name ending in .module.css to use CSS Modules in Next.js.

2fill in blank

medium

Complete the code to apply a CSS module class to a div element.

NextJS

export default function Card() {
  return <div className=[1]>Content</div>;
}

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

Astyles.card

Bstyles['card']

C"card"

Dcard

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain string class names without referencing the styles object.

Using incorrect syntax like just the class name without quotes or styles.

Use styles.card to apply the CSS module class named card to the element.

3fill in blank

hard

Fix the error in the code to correctly apply multiple CSS module classes to a button.

NextJS

export default function SubmitButton() {
  return <button className={`$[1] ${styles.primary}`}>Submit</button>;
}

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

Astyles['btn']

Bbtn

Cstyles.btn

Dbtn.primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain class names without styles. prefix inside template strings.

Trying to access classes as plain strings or invalid object properties.

Use styles.btn to correctly reference the CSS module class for btn inside the template string.

4fill in blank

hard

Fill both blanks to create a CSS module style object with dynamic class names.

NextJS

const buttonClass = `$[1] [2]`;

export default function Button() {
  return <button className={buttonClass}>Press</button>;
}

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

Astyles.btn

Bstyles.active

Cbtn

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain class names without styles. prefix.

Forgetting to separate class names with a space.

Use styles.btn and styles.active to combine CSS module classes dynamically.

5fill in blank

hard

Fill all three blanks to create a CSS module style object with conditional class names.

NextJS

const isActive = true;
const className = `$[1] $[2] ? [3] : ''`;

export default function Toggle() {
  return <div className={className}>Toggle me</div>;
}

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

Astyles.toggle

BisActive

Cstyles.active

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain strings instead of CSS module references.

Not using the boolean variable correctly in the condition.

Use styles.toggle as the base class, check the isActive boolean, and conditionally add styles.active if true.