CSS imports per route in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a CSS file in a Remix route component.

Remix

import styles from './styles.css';

export default function RouteComponent() {
  return <div className={styles.[1]>Hello Remix</div>;
}

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

AclassName

Bcontainer

Cstyle

Dcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'className' instead of a styles property

Trying to use 'style' instead of 'className'

Forgetting to use dot notation like styles.container

You import the CSS file as styles and then use styles.container as a class name in JSX (assuming .container is defined in the CSS file).

2fill in blank

medium

Complete the code to export a links function that imports CSS for this Remix route.

Remix

import styles from './route.css';

export function links() {
  return [{ rel: 'stylesheet', href: [1] }];
}

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

Astyles

Bstyles.toString()

Cstyles.href

D'./route.css'

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the string path instead of the imported href

Using the variable name without accessing href

Not returning an array from links function

The links function returns an array with objects that have href pointing to the imported CSS file's href property.

3fill in blank

hard

Fix the error in the links function to properly import CSS in Remix.

Remix

export function links() {
  return [{ rel: 'stylesheet', href: [1] }];
}

// CSS file is imported as 'styles' above

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

Astyles.toString()

Bstyles

C'./styles.css'

Dstyles.href

Attempts:

3 left

💡 Hint

Common Mistakes

Using the imported variable directly without .href

Using a string path instead of the imported CSS

Calling toString() on the imported CSS

The href must be the href property of the imported CSS module, not the module itself or a string path.

4fill in blank

hard

Fill both blanks to import and apply CSS styles in a Remix route component.

Remix

import [1] from './route.css';

export default function Route() {
  return <div className=[1].[2]>Styled Route</div>;
}

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

Astyles

Bcontainer

Cstyle

Dcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'className' as the import name

Using 'style' instead of 'className' in JSX

Not matching the import name and className prefix

You import the CSS as styles and use styles.container as the class name for the div (assuming .container in CSS).

5fill in blank

hard

Fill all three blanks to import CSS, export links, and apply styles in a Remix route.

Remix

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

export function links() {
  return [{ rel: 'stylesheet', href: [2] }];
}

export default function Route() {
  return <div className=[1].[3]>Hello Styled Remix</div>;
}

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

Astyles

Bstyles.href

Ccontainer

Dcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using string paths instead of imported CSS href

Mismatching import and usage variable names

Not returning an array from links function

Forgetting the specific class name like container

Import the CSS as styles, export the links function returning the href from styles.href, and use styles.container as the class name (assuming .container in CSS).