Passing styles to components (--style-props) in Svelte - Deep Dive

Overview - Passing styles to components (--style-props)

What is it?

Passing styles to components in Svelte means giving a component the ability to receive style information from outside and apply it to its elements. This lets you customize how a component looks without changing its internal code. The --style-props approach is a way to pass CSS custom properties (variables) or style values as props to components. It helps keep styles flexible and reusable.

Why it matters

Without passing styles to components, every style change would require editing the component's code, making reuse hard and slow. This approach lets developers share components that adapt visually to different needs easily. It saves time, reduces bugs, and makes apps look consistent but customizable. Imagine having a lamp that only comes in one color versus one where you can change the shade anytime without rewiring it.

Where it fits

Before learning this, you should understand basic Svelte components and how props work. After this, you can explore advanced theming techniques, CSS variables, and component libraries that use style props for design systems.

Mental Model

Core Idea

Passing styles to components means giving components flexible style inputs so they can change appearance without changing their code.

Think of it like...

It's like giving a friend a plain white T-shirt and some fabric markers so they can decorate it however they want, instead of sewing a new shirt every time.

Component
  ├─ Receives style props (CSS variables or style values)
  ├─ Applies styles inside using those props
  └─ Renders with customized look

Outside code
  └─ Passes style props when using component

Flow:
[Parent] --style-props--> [Component] --applies styles--> [Rendered UI]

Build-Up - 7 Steps

1

Foundation

Understanding Svelte component props

Concept: Learn how Svelte components accept data through props.

In Svelte, components can receive values from their parent using props. For example, a component can have and use {color} inside its markup. When you use , the component uses 'red' as the color.

Result

You can control component behavior or appearance by passing different prop values.

Understanding props is the base for passing any data, including styles, into components.

2

Foundation

Basics of CSS custom properties

Concept: Learn what CSS variables are and how they work.

CSS custom properties look like --main-color: blue; and can be used inside styles as var(--main-color). They let you define a value once and reuse it. You can override them on any element or component to change styles dynamically.

Result

You can create flexible styles that change based on where they are applied.

CSS variables are the key to passing style information in a reusable way.

3

Intermediate

Passing CSS variables as style props

🤔Before reading on: Do you think you can pass CSS variables directly as component props or do you need a special syntax? Commit to your answer.

Concept: Use props to pass CSS variable values and apply them inside components.

You can pass style values as props like

Result

The component's background color changes based on the passed --bg-color prop.

Passing CSS variables as props lets components adapt styles without hardcoding colors or sizes.

4

Intermediate

Using --style-props syntax in Svelte

🤔Before reading on: Do you think --style-props is a built-in Svelte feature or a naming convention? Commit to your answer.

Concept: The --style-props approach uses CSS custom properties passed as props with names starting with -- to style components dynamically.

When you pass props like --font-size='1.5rem' to a component, you can use them inside style attributes or CSS blocks with var(--font-size). This pattern is a convention to clearly separate style props from regular data props.

Result

Components styled with --style-props can easily receive and apply multiple style customizations.

Using --style-props as a naming pattern helps organize and identify style-related props clearly.

5

Intermediate

Combining style props with component CSS

🤔Before reading on: Will style props override component CSS or only add to it? Commit to your answer.

Concept: Style props can override or complement component CSS by using CSS variables inside component styles.

Inside a component's

Correct approach:

Root cause: The component does not apply the passed style prop because it lacks CSS variable usage.

#2 Passing invalid CSS values as style props without validation.

Wrong approach:

Correct approach:

Root cause:

No validation leads to invalid CSS that browsers ignore or cause layout issues.

#3 Overusing style props for layout changes instead of component composition.

Wrong approach:

Correct approach:

...
...

Root cause:

Misunderstanding style props as a replacement for structural design leads to fragile and hard-to-maintain code.

Key Takeaways

Passing styles to components using --style-props lets you customize appearance without changing component code.

This technique relies on CSS custom properties and Svelte's prop system working together.

Components must explicitly use CSS variables to apply passed style props effectively.

Using fallbacks and validation for style props prevents visual bugs and improves robustness.

Understanding how style props affect reactivity and performance helps build scalable, flexible UI components.

Practice

1. What is the main benefit of passing styles as props to a Svelte component?

easy

A. It automatically adds animations to the component.

B. It makes the component run faster.

C. It allows customizing the component's appearance without changing its internal code.

D. It disables the component's default styles permanently.

Solution

1. Step 1: Understand the purpose of style props

   Passing styles as props lets you change how a component looks without editing its code.

2. Step 2: Compare options

   Only It allows customizing the component's appearance without changing its internal code. correctly describes this benefit; others mention speed, animations, or disabling styles, which are unrelated.

3. Final Answer:

   It allows customizing the component's appearance without changing its internal code. -> Option C

4. Quick Check:

   Style props = customize without code change [OK]

Hint: Style props let you change look without touching component code [OK]

Common Mistakes:

• Thinking style props improve performance
• Confusing style props with animations
• Assuming style props disable default styles

2. Which of the following is the correct way to accept a style prop in a Svelte component?

easy

A. export let style;

B. let style = props.style;

C. const style = this.props.style;

D. function style() {}

Solution

1. Step 1: Recall Svelte prop syntax

   Svelte uses export let to declare props that components accept.

2. Step 2: Evaluate options

   export let style; uses correct Svelte syntax. Options B and C use React or other framework styles. function style() {} is a function, not a prop declaration.

3. Final Answer:

   export let style; -> Option A

4. Quick Check:

   Svelte props use export let [OK]

Hint: Use 'export let' to declare props in Svelte components [OK]

Common Mistakes:

• Using React or Vue syntax inside Svelte
• Declaring props without export
• Confusing functions with props

3. Given this parent component code:

<ChildComponent style="color: red; font-weight: bold;" />

And this child component code:

  <script>
    export let style;
  </script>
  <div style={style}>Hello</div>

What will be the color and font weight of the text rendered by ChildComponent?

medium

A. Default color and font weight

B. No text will be rendered

C. Blue color and normal font weight

D. Red color and bold font weight

Solution

1. Step 1: Understand style passing

   The parent passes a style string with color red and bold font weight to the child as a prop.

2. Step 2: Check child usage

   The child applies the style prop directly to the div's style attribute, so the styles apply to the text.

3. Final Answer:

   Red color and bold font weight -> Option D

4. Quick Check:

   Passed style string applies directly [OK]

Hint: Style string passed as prop applies directly to element [OK]

Common Mistakes:

• Assuming styles won't apply without CSS files
• Thinking default styles override passed styles
• Believing text won't render without explicit content

4. What is wrong with this child component code that tries to accept a style prop?

<script>
  let style;
</script>
<div style={style}>Content</div>

medium

A. The div tag is missing a closing tag.

B. The style prop is not exported, so it won't receive values from the parent.

C. The style variable should be a function, not a let variable.

D. The style attribute cannot be bound to variables in Svelte.

Solution

1. Step 1: Check prop declaration

   In Svelte, props must be declared with export let to receive values from parents.

2. Step 2: Identify the issue

   The code declares let style; without export, so it stays local and undefined.

3. Final Answer:

   The style prop is not exported, so it won't receive values from the parent. -> Option B

4. Quick Check:

   Props need export let [OK]

Hint: Always export props to receive parent values [OK]

Common Mistakes:

• Forgetting to export props
• Thinking style binding is invalid
• Misreading HTML tag syntax

5. You want to create a reusable Button component that accepts custom styles from its parent. Which approach correctly passes and applies styles while keeping default styles intact?

Choose the best code snippet for the Button.svelte component:

hard

A. <script>
export let style = '';
</script>
<button style={`background: blue; color: white; ${style}`}>Click me</button>

B. <script>
let style;
</script>
<button style={style}>Click me</button>

C. <script>
export let style;
</script>
<button class={style}>Click me</button>

D. <script>
export let style;
</script>
<button>Click me</button>

Solution

1. Step 1: Understand default and custom styles

   The component should have default styles but allow extra styles from the parent.

2. Step 2: Analyze options

   <script>
     export let style = '';
   </script>
   <button style={`background: blue; color: white; ${style}`}>Click me</button>

   sets a default style string and appends the passed style, combining both.

   <script>
     let style;
   </script>
   <button style={style}>Click me</button>

   misses export and default styles.

   <script>
     export let style;
   </script>
   <button class={style}>Click me</button>

   uses class binding incorrectly for styles.

   <script>
     export let style;
   </script>
   <button>Click me</button>

   ignores the style prop.

3. Final Answer:

   export let style = ''; button with combined style string -> Option A

4. Quick Check:

   Combine default + passed styles with export let [OK]

Hint: Combine default and passed styles in template string [OK]

Common Mistakes:

• Not exporting style prop
• Overwriting default styles instead of combining
• Using class instead of style attribute for inline styles