Passing styles to components (--style-props) in Svelte - Step-by-Step Execution

Concept Flow - Passing styles to components (--style-props)

Parent Component

↓

Child Component

↓

Rendered Output

↓

User sees styled component

The parent sends style properties to the child component, which applies them to its elements, changing how it looks.

Execution Sample

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
</script>
<Child style={{ color: 'red', padding: '1rem' }} />

Parent passes style properties to Child component using style prop.

Execution Table

Step	Action	Style Props Passed	Child Applies Styles	Rendered Output
1	Parent renders Child	{ color: 'red', padding: '1rem' }	No (initial render)	Child default style
2	Child receives style props	{ color: 'red', padding: '1rem' }	Yes, applies color red and padding 1rem	Child text is red with padding
3	User views page	{ color: 'red', padding: '1rem' }	Styles remain applied	Child styled as red text with padding
4	Parent updates style props	{ color: 'blue', padding: '2rem' }	Child updates styles accordingly	Child text is blue with larger padding
5	Parent removes style props	{}	Child reverts to default styles	Child default style restored

💡 Execution stops when component unmounts or no more style updates.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
styleProps	{}	{ color: 'red', padding: '1rem' }	{ color: 'blue', padding: '2rem' }	{}
childElementStyle	default	color: red; padding: 1rem;	color: blue; padding: 2rem;	default

Key Moments - 2 Insights

Why doesn't the child component style change before receiving the style props?

Because the child applies styles only after receiving the style props from the parent, as shown in step 2 of the execution_table.

What happens if the parent removes the style props?

The child reverts to its default styles since no style props are passed, as shown in step 5 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the childElementStyle after step 2?

A color: blue; padding: 2rem;

B default

C color: red; padding: 1rem;

D no style applied

💡 Hint

Check the variable_tracker row for childElementStyle after step 2.

At which step does the child component update its styles to blue text with larger padding?

A Step 3

B Step 4

C Step 1

D Step 5

💡 Hint

Look at the execution_table row describing style updates.

If the parent never passes --style-props, what style does the child have?

A Default child styles

B Red text with padding

C Blue text with padding

D No styles at all

💡 Hint

Refer to step 1 and step 5 in execution_table and variable_tracker.

Concept Snapshot

Passing styles to components (--style-props) in Svelte:
- Parent uses --style-props to send style object to child.
- Child applies these styles to its elements dynamically.
- Styles update reactively when parent changes props.
- Removing props reverts child to default styles.
- Enables flexible styling from parent without CSS overrides.

Full Transcript

In Svelte, passing styles to components using --style-props means the parent component sends a style object to the child. The child then applies these styles to its elements, changing how it looks. Initially, the child has default styles. When the parent passes styles, the child updates accordingly. If the parent changes or removes these styles, the child updates or reverts. This allows easy, dynamic styling controlled by the parent component.