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.