Why Remix supports multiple styling approaches - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

Remix

import styles from '[1]';

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

A'styles.html'

B'./styles.json'

C'./styles.css'

D'styles.js'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong file extensions like .js or .json for CSS imports.

Omitting the relative path './' when importing local files.

In Remix, CSS files are imported with their relative path and .css extension.

2fill in blank

medium

Complete the code to apply inline styles in a Remix component.

Remix

<div style={{ [1] }}></div>

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

Acolor: 'red'

B'color: red;'

C{ 'color': 'red' }

D{ color: 'red' }

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of an object for inline styles.

Using quotes around the whole style instead of an object.

Inline styles in React and Remix use a JavaScript object with camelCase keys and string values.

3fill in blank

hard

Fix the error in this Remix component code that uses CSS modules.

Remix

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

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

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

Astyles.button

Bstyles['button']

C"styles.button"

Dbutton

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around styles.button which makes it a string, not a variable.

Using the class name string directly without referencing styles.

CSS modules are accessed as properties on the imported styles object without quotes.

4fill in blank

hard

Fill both blanks to create a styled component using Tailwind CSS in Remix.

Remix

<button className="[1] [2]">Submit</button>

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

Abg-blue-500

Btext-white

Cfont-bold

Dborder-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using only one class which may not style the button fully.

Using unrelated classes like 'border-2' without color classes.

Tailwind CSS classes like 'bg-blue-500' and 'text-white' style the button background and text color.

5fill in blank

hard

Fill all three blanks to complete a Remix loader function that fetches styles conditionally.

Remix

export async function loader() {
  const useDark = [1];
  return {
    styles: useDark ? [2] : [3]
  };
}

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

Atrue

B'dark.css'

C'light.css'

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting useDark to true when the question expects false.

Swapping the dark and light CSS file names.

The loader sets useDark to false, then returns 'dark.css' or 'light.css' based on that value.