Passing styles to components (--style-props) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a background color style to the Button component.

Svelte

<Button style="background-color: [1];">Click me</Button>

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

Ared

Bcolor

Cfont-size

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS property names instead of values inside the style attribute.

Leaving the style value empty.

The style attribute expects CSS property values like colors. Here, red sets the background color.

2fill in blank

medium

Complete the code to pass a dynamic font size style to the Text component using a Svelte variable.

Svelte

<Text style="font-size: [1];">Hello</Text>

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

AfontSize + 'px'

Bfont-size

C{fontSize}

DfontSize

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without curly braces.

Using CSS property names instead of variable values.

In Svelte, to use a variable inside an attribute, wrap it in curly braces. Here, {fontSize + 'px'} inserts the variable value with units.

3fill in blank

hard

Fix the error in passing multiple styles to the Card component inline.

Svelte

<Card style="color: blue; [1]">Content</Card>

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

AfontWeight: bold;

Bfont-weight bold;

Cfont-weight: bold;

Dfont-weight=bold;

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase instead of kebab-case in inline styles.

Missing colon or semicolon in style declarations.

CSS properties in style attributes use kebab-case with colons and semicolons. font-weight: bold; is correct.

4fill in blank

hard

Fill both blanks to pass a dynamic color and padding style to the Box component.

Svelte

<Box style="color: [1]; padding: [2];">Box content</Box>

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

A{textColor}

B10px

C5rem

DpaddingValue

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting curly braces around variables.

Using variable names without units for padding.

Use Svelte variables inside curly braces for dynamic styles. Padding needs a unit like 'px'.

5fill in blank

hard

Fill all three blanks to pass uppercase text, margin, and border styles dynamically to the Label component.

Svelte

<Label style="text-transform: [1]; margin: [2]; border: [3];">Label</Label>

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

Auppercase

B1rem

C1px solid black

Dlowercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid CSS values like 'lowercase' when uppercase is expected.

Omitting units for margin or incomplete border syntax.

CSS properties like text-transform accept values like 'uppercase'. Margin and border need units and full declarations.