CSS Modules support in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a CSS module in an Astro component.

Astro

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

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

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

Abutton

Bcontainer

Cbtn

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class name not defined in the CSS module.

Forgetting to use the imported styles object.

The CSS class btn is imported from the CSS module and used as styles.btn to style the button.

2fill in blank

medium

Complete the code to apply multiple CSS module classes to an element in Astro.

Astro

<div className={`${styles.container} [1]`}>Content</div>

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

Astyles.content

Bstyles.main

Cstyles.header

Dstyles.footer

Attempts:

3 left

💡 Hint

Common Mistakes

Not using template literals to combine classes.

Using plain strings instead of styles object.

Using template literals, multiple CSS module classes can be combined. Here, styles.container and styles.main are applied.

3fill in blank

hard

Fix the error in the Astro component to correctly use CSS modules for styling.

Astro

import styles from './Card.module.css';

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

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

Astyles.card

B"card"

Ccard

Dstyles['card']

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain string class names instead of styles object.

Forgetting to import the CSS module.

The correct way to apply a CSS module class is using styles.card. Using a plain string or quotes will not apply the module styles.

4fill in blank

hard

Fill both blanks to create a CSS module style object and apply it to a div in Astro.

Astro

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

export default function Layout() {
  return <div className=[2].wrapper}}>Layout content</div>;
}

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

Astyles

Bstyle

CLayoutStyles

Dcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for import and usage.

Not using curly braces correctly in JSX.

Importing the CSS module as styles and using styles.wrapper applies the CSS module class correctly.

5fill in blank

hard

Fill all three blanks to create a CSS module, import it, and apply multiple classes in Astro.

Astro

/* Layout.module.css */
.wrapper {
  display: flex;
}
.main {
  flex: 1;
}

---

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

export default function Layout() {
  return (
    <div className=[2].wrapper}>
      <main className=[3].main}>Content</main>
    </div>
  );
}

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

Astyles

Bstyle

CLayoutStyles

Dcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for import and usage.

Forgetting to import the CSS module.

Importing the CSS module as css and using css.wrapper and css.main applies the styles correctly.