Passing styles to components (--style-props) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of passing styles to Svelte components using --style-props?

It allows you to customize the look of a component by sending CSS style values as properties, making components flexible and reusable without changing their internal code.

beginner

How do you define a style property in a Svelte component to accept a passed style value?

You declare a export let variable in the component script and then use it in the style attribute or CSS variables inside the component.

intermediate

Example: How would you pass a background color to a Svelte button component using style props?

In the parent: <code>&lt;Button bgColor="lightblue" /&gt;</code>. In the Button component: <code>export let bgColor = 'white';</code> and use <code>style="background-color: {bgColor};"</code> in the button element.

beginner

Why is passing styles as props better than hardcoding styles inside components?

It keeps components flexible and reusable. You can change their appearance without editing their code, which helps maintain clean and scalable projects.

intermediate

What is a common mistake when passing styles to components and how to avoid it?

A common mistake is passing raw CSS strings that break syntax or forgetting to set default values for style props. Avoid this by validating inputs and providing defaults.

How do you declare a style property in a Svelte component to accept a passed style value?

A const styleProp = 'value';

B let styleProp = export;

C export let styleProp;

D styleProp: string;

In Svelte, you use export let to declare a property that can receive values from outside.

What is the benefit of passing styles as props to components?

A It makes components reusable with different looks.

B It makes components slower.

C It hides the component code.

D It forces all components to have the same style.

Passing styles as props allows you to reuse the same component with different appearances.

Which of these is a correct way to apply a passed style prop inside a Svelte component?

A <button style="background-color: {bgColor};">Click</button>

B <button style="bgColor: background-color;">Click</button>

C <button style="{bgColor}">Click</button>

D <button style="color: bgColor;">Click</button>

You use curly braces to insert the variable value inside the style attribute.

What should you do to avoid errors when passing style props?

A Hardcode all styles inside components.

B Never use style props.

C Use only inline styles without props.

D Provide default values and validate inputs.

Providing defaults and validating helps prevent broken styles and unexpected behavior.

If you want to pass a font size to a component, which is the best way?

A Pass font size as a number without units.

B export let fontSize = '16px'; and use style="font-size: {fontSize};"

C Hardcode font size inside the component.

D Use a global CSS file only.

Passing font size as a prop with units and applying it in style is flexible and clear.

Explain how you can pass and use style properties in a Svelte component to customize its appearance.

Think about how variables and style attributes work together in Svelte.

Describe common mistakes when passing styles to components and how to avoid them.

Consider what can break styles and how to keep components stable.