CSS-in-JS considerations in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the styled function from the styled-components library.

NextJS

import [1] from 'styled-components';

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

Astyles

Bstyle

Ccss

Dstyled

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'style' instead of 'styled' causes an import error.

Using 'css' imports a helper but not the main styled function.

The styled function is the correct import to create styled components in CSS-in-JS using styled-components.

2fill in blank

medium

Complete the code to create a styled button component with a background color of blue.

NextJS

const Button = styled.button`background-color: [1];`;

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

Ablue

Bred

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a different color than blue.

Leaving the color value empty.

The background color should be set to 'blue' as requested.

3fill in blank

hard

Fix the error in the styled component syntax by completing the missing template literal marker.

NextJS

const Container = styled.div[1]background: white; padding: 1rem;`;

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

A'

B`

C"

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using single or double quotes instead of backticks.

Omitting the template literal marker causes syntax errors.

The styled component syntax requires a backtick ` to start the template literal.

4fill in blank

hard

Fill both blanks to correctly apply dynamic props for background and font color in a styled component.

NextJS

const Text = styled.p`background: [1]; color: [2];`;

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

Aprops => props.bgColor

Bprops => props.fontColor

Cprops => props.color

Dprops => props.background

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up background and font color props.

Using incorrect prop names that don't exist.

The background uses props.bgColor and the font color uses props.fontColor to dynamically style the component.

5fill in blank

hard

Fill all three blanks to create a styled component that changes color on hover using props.

NextJS

const Link = styled.a`color: [1]; text-decoration: none; &:hover { color: [2]; cursor: [3]; }`;

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

Aprops => props.color

Bprops => props.hoverColor

C'pointer'

D'default'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong prop names for colors.

Setting cursor to 'default' instead of 'pointer' on hover.

The link color uses props.color, changes to props.hoverColor on hover, and the cursor changes to 'pointer' to indicate it's clickable.