SvelteHow-ToBeginner · 3 min read

How to Use Dynamic Styles in Svelte: Simple Guide

In Svelte, you can use dynamic styles by binding style attributes to reactive variables with style or by using class bindings with class:. This lets you change CSS properties or classes based on component state or user actions.

📐

Syntax

Dynamic styles in Svelte can be applied using inline style bindings or class bindings. Inline style binding uses style="property: {value}" where {value} is a reactive variable. Class binding uses class:classname={condition} to toggle classes based on conditions.

Inline style binding: Directly set CSS properties dynamically.
Class binding: Add or remove CSS classes based on logic.

svelte

<script>
  let color = 'red';
  let isActive = true;
</script>

<div style="color: {color};">This text is colored dynamically.</div>
<div class:active={isActive}>This div toggles the 'active' class.</div>

<style>
  .active {
    font-weight: bold;
  }
</style>

Output

Two lines of text: the first is red colored, the second is bold because 'active' class is applied.

💻

Example

This example shows a button that changes its background color dynamically when clicked. It uses a reactive variable to toggle the style.

svelte

<script>
  let isBlue = false;
  function toggleColor() {
    isBlue = !isBlue;
  }
</script>

<button
  on:click={toggleColor}
  style="background-color: {isBlue ? 'blue' : 'gray'}; color: white; padding: 1rem; border: none; border-radius: 0.5rem; cursor: pointer;"
>
  Click me to change color
</button>

Output

A button with gray background initially; clicking it toggles background between blue and gray.

⚠️

Common Pitfalls

Common mistakes include:

Using quotes incorrectly inside style bindings, which breaks the syntax.
Trying to use JavaScript expressions directly inside style strings without curly braces.
Forgetting to update reactive variables, so styles don't change.

Always wrap dynamic values in {} inside style attributes and update variables properly.

svelte

<!-- Wrong way -->
<div style="color: isBlue ? 'blue' : 'gray'">Wrong syntax</div>

<!-- Right way -->
<script>let isBlue = true;</script>
<div style="color: {isBlue ? 'blue' : 'gray'}">Correct syntax</div>

Output

The first div will not render color correctly; the second div will show text in blue.

📊

Quick Reference

Feature	Syntax	Description
Inline style binding	style="property: {value}"	Set CSS property dynamically with reactive value
Class binding	class:name={condition}	Add or remove CSS class based on condition
Reactive variable	let varName = value;	Variable that triggers UI updates when changed
Event binding	on:event={handler}	Run code on user actions to update styles

✅

Key Takeaways

Use curly braces {} inside style attributes to bind dynamic values in Svelte.

Class bindings with class:name={condition} toggle CSS classes based on state.

Update reactive variables to trigger style changes automatically.

Avoid putting raw JavaScript expressions directly inside style strings without braces.

Combine event handlers and reactive variables for interactive dynamic styling.