Passing styles to components (--style-props) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What style will the button have?

Given this Svelte component usage, what will be the background color of the button?

<Button style="background-color: red;" />

Assume the Button component uses --style-props to pass styles.

Svelte

/* Button.svelte */
<script>
  export let style = "";
</script>
<button style={style}>Click me</button>

A The button background will be red.

B The button background will be default (no red).

C The button will have a syntax error and not render.

D The button background will be blue.

💡 Hint

Think about how inline styles passed as props affect the element.

The style prop is passed down and applied directly to the button's style attribute, so the background color becomes red.

📝 Syntax

intermediate

Which option correctly passes multiple CSS variables as style props?

In Svelte, you want to pass two CSS custom properties --main-color and --padding to a component using --style-props. Which syntax is correct?

A <Component style={"--main-color: blue; --padding: 1rem;"} />

B <Component style={{ '--main-color': 'blue', '--padding': '1rem' }} />

C <Component style='--main-color: blue; --padding: 1rem;' />

D <Component style="--main-color: blue; --padding: 1rem;" />

💡 Hint

Remember how HTML inline styles are written as strings.

Option D uses a valid HTML inline style string with CSS variables separated by semicolons. Option D uses JavaScript object notation, which Svelte supports by converting to inline styles. Option D uses single quotes for the attribute value. Option D misses the semicolon at the end.

❓ state_output

advanced

What is the final color of the text after clicking the button twice?

Consider this Svelte component that toggles a CSS variable passed as a style prop:

<script>
  let isRed = true;
</script>

<div
  style={isRed ? '--text-color: red;' : '--text-color: blue;'}
>
  <button
    on:click={() => isRed = !isRed}
  >Toggle Color</button>

  <p style="color: var(--text-color);">Colored Text</p>
</div>

What color will the "Colored Text" be after clicking the button twice?

A Red

B Blue

C No color (default black)

D Syntax error prevents rendering

💡 Hint

Each click toggles the CSS variable between red and blue.

Initial state is red. First click changes to blue. Second click toggles back to red. So after two clicks, the text color is red.

🔧 Debug

advanced

Why does this style prop not apply the background color?

Given this Svelte component usage:

<Card style="background-color: green" />

And the Card.svelte component:

<script>
  export let style = "";
</script>

<div style="{style}">Content</div>

Why does the background color not appear green?

A The background-color property is invalid CSS and ignored.

B The style prop is not passed down because it is not declared as export.

C The style attribute in the div uses quotes incorrectly, so the style string is not applied.

D The component needs to use a class instead of style prop.

💡 Hint

Check how the style attribute is bound in the component.

The div uses style="{style}" which treats {style} as a string literal, not a variable. It should be style={style} without quotes to bind the variable.

🧠 Conceptual

expert

How does using --style-props improve component styling flexibility in Svelte?

Choose the best explanation for why passing styles via --style-props is beneficial in Svelte components.

A It automatically scopes styles globally, so no CSS conflicts occur anywhere in the app.

B It allows parent components to customize CSS variables dynamically, enabling theme and style changes without modifying component internals.

C It disables component reactivity to style changes, making rendering faster.

D It forces all styles to be inline, which improves performance by avoiding CSS files.

💡 Hint

Think about how CSS variables and style props help with theming.

Passing styles as CSS variables lets parent components control appearance without changing the child component code. This supports flexible theming and style overrides.