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).

Practice

1. In Remix, how do you add CSS styles that apply only to a specific route?

easy

A. By exporting a links function that returns CSS links from the route file

B. By importing CSS files directly inside the component's JSX

C. By adding CSS inside a global stylesheet only

D. By using inline styles on every HTML element

Solution

1. Step 1: Understand Remix route styling

   Remix uses a special links export in route files to load CSS only for that route.

2. Step 2: Why links is preferred

   This method keeps styles scoped and improves loading by only fetching needed CSS.

3. Final Answer:

   By exporting a links function that returns CSS links from the route file -> Option A

4. Quick Check:

   Route CSS = links export [OK]

Hint: Use links export in route files for CSS [OK]

Common Mistakes:

• Importing CSS inside JSX instead of using links
• Adding all CSS globally instead of per route
• Using inline styles everywhere

2. Which of the following is the correct syntax to import a CSS file in a Remix route using the links function?

easy

A. export const links = () => [{ rel: 'stylesheet', href: './styles.css' }];

B. import './styles.css';

C. export default function links() { return ; }

D. export function links() { return { rel: 'stylesheet', href: './styles.css' }; }

Solution

1. Step 1: Identify correct links export syntax

   Remix expects links as a function returning an array of objects with rel and href.

2. Step 2: Check arrow function usage

   export const links = () => [{ rel: 'stylesheet', href: './styles.css' }]; uses an arrow function returning the correct array format, which is valid and common.

3. Final Answer:

   export const links = () => [{ rel: 'stylesheet', href: './styles.css' }]; -> Option A

4. Quick Check:

   Arrow function returning array = export const links = () => [{ rel: 'stylesheet', href: './styles.css' }]; [OK]

Hint: Use arrow function returning array of link objects [OK]

Common Mistakes:

• Using default export instead of named export
• Returning JSX instead of array
• Importing CSS directly without links function

3. Given this Remix route code, what CSS files will be loaded when visiting this route?

import styles from '~/styles/page.css';

export const links = () => [
  { rel: 'stylesheet', href: styles }
];

medium

A. No CSS will load because styles is imported incorrectly

B. The CSS file at '~/styles/page.css' will be loaded

C. All CSS files in the styles folder will load

D. Only global CSS will load, not this file

Solution

1. Step 1: Understand CSS import in Remix

   Importing CSS as styles gives the path string for the CSS file.

2. Step 2: Check links usage

   The links function returns an array with the CSS file href set to styles, so it loads that CSS file.

3. Final Answer:

   The CSS file at '~/styles/page.css' will be loaded -> Option B

4. Quick Check:

   Imported CSS path used in links = The CSS file at '~/styles/page.css' will be loaded [OK]

Hint: Imported CSS path used in links loads that file [OK]

Common Mistakes:

• Thinking import gives CSS content, not path
• Assuming all folder CSS loads automatically
• Confusing global CSS with route CSS

4. Identify the error in this Remix route CSS import code:

export function links() {
  return {
    rel: 'stylesheet',
    href: '/styles.css'
  };
}

medium

A. The href path must be relative, not absolute

B. The rel attribute should be 'style' instead of 'stylesheet'

C. The function should be named Links with uppercase L

D. The links function should return an array, not an object

Solution

1. Step 1: Check return type of links

   Remix expects links to return an array of link objects, not a single object.

2. Step 2: Validate other attributes

   The href and rel values are correct; only the return type is wrong.

3. Final Answer:

   The links function should return an array, not an object -> Option D

4. Quick Check:

   links returns array = The links function should return an array, not an object [OK]

Hint: Return an array of link objects in links [OK]

Common Mistakes:

• Returning a single object instead of array
• Incorrect function name casing
• Wrong rel attribute value

5. You want to load two CSS files, base.css and theme.css, only on a specific Remix route. How should you write the links function to achieve this?

hard

A. import base from './base.css'; import theme from './theme.css';
export function links() { return [base, theme]; }

B. export const links = () => ({
rel: 'stylesheet', href: '/base.css',
rel: 'stylesheet', href: '/theme.css'
});

C. export const links = () => [
{ rel: 'stylesheet', href: '/base.css' },
{ rel: 'stylesheet', href: '/theme.css' }
];

D. export function links() {
return <>

</>;
}

Solution

1. Step 1: Understand multiple CSS imports in links

   The links function must return an array of objects, each with rel and href.

2. Step 2: Check each option's correctness

   export const links = () => [ { rel: 'stylesheet', href: '/base.css' }, { rel: 'stylesheet', href: '/theme.css' } ]; correctly returns an array with two link objects. Others either return an object, JSX, or invalid array contents.

3. Final Answer:

   export const links = () => [ { rel: 'stylesheet', href: '/base.css' }, { rel: 'stylesheet', href: '/theme.css' } ]; -> Option C

4. Quick Check:

   Array of link objects = export const links = () => [ { rel: 'stylesheet', href: '/base.css' }, { rel: 'stylesheet', href: '/theme.css' } ]; [OK]

Hint: Return array with multiple link objects in links [OK]

Common Mistakes:

• Returning a single object with duplicate keys
• Returning JSX instead of array
• Returning array of strings instead of objects