Passing styles to components (--style-props) in Svelte - Mini Project: Build & Apply

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

📖 Scenario: You are building a simple Svelte app that shows colored boxes with text. You want to pass different background colors and font sizes as styles from the parent component to child components.

🎯 Goal: Create a Svelte component that accepts style properties from its parent using --style-props technique and apply those styles dynamically.

📋 What You'll Learn

Create a child component with a style attribute that uses passed style props

Pass style properties like background-color and font-size from the parent

Use Svelte syntax for props and style binding

Render multiple child components with different styles

💡 Why This Matters

🌍 Real World

Passing styles as props is common when building reusable UI components that need to look different in different places without duplicating code.

💼 Career

Understanding how to pass and apply styles dynamically in components is essential for frontend developers working with modern frameworks like Svelte.

1

Create the Child Component with a Text Box

Create a Svelte component file named ColorBox.svelte. Inside it, create a <div> with the class box that displays the text {text}. Declare a prop called text to receive this text.

Svelte

  // Declare a prop called text
  export let text;



  {text}

Hint

Use export let text; to declare a prop in Svelte.

2

Add a Style Prop for Background Color

In ColorBox.svelte, add a new prop called bgColor to receive a background color. Add a style attribute to the <div> that sets background-color to {bgColor}.

Svelte

  export let text;
  // Declare a prop called bgColor
  export let bgColor;



  {text}

Hint

Use export let bgColor; and bind it in the style attribute.

3

Add Font Size Style Prop

In ColorBox.svelte, add a new prop called fontSize to receive font size. Update the style attribute on the <div> to also set font-size to {fontSize}. Use a semicolon to separate styles.

Svelte

  export let text;
  export let bgColor;
  // Declare a prop called fontSize
  export let fontSize;



  {text}

Hint

Add export let fontSize; and include it in the style attribute separated by a semicolon.

4

Use the Child Component with Different Styles

In App.svelte, import ColorBox from ./ColorBox.svelte. Render three <ColorBox> components with these props:
1. text="Red Box", bgColor="red", fontSize="1.5rem"
2. text="Green Box", bgColor="green", fontSize="2rem"
3. text="Blue Box", bgColor="blue", fontSize="1rem"

Svelte

  import ColorBox from './ColorBox.svelte';

Hint

Use the <ColorBox> component with the exact props given.

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