Svelte Styling

Svelte Styling

Quick Start

JS vars in CSS: Use style: directive to set CSS custom properties from JavaScript.

<script>
	let columns = $state(3);
</script>

<div style:--columns={columns}>
	{@render children()}
</div>

<style>
	div {
		display: grid;
		grid-template-columns: repeat(var(--columns), 1fr);
	}
</style>

Styling Child Components

Preferred: Pass CSS custom properties as component props:

<!-- Parent.svelte -->
<Child --color="red" --spacing="1rem" />

<!-- Child.svelte -->
<h1>Hello</h1>

<style>
	h1 {
		color: var(--color, blue);
		margin: var(--spacing, 0);
	}
</style>

Fallback: Use :global when custom properties aren't possible (e.g., library components):

<div>
	<LibraryComponent />
</div>

<style>
	div :global {
		h1 { color: red; }
	}
</style>

Reference Files

• styling-patterns.md - Complete CSS patterns and techniques

Notes

• All <style> blocks are scoped to the component by default
• Use style: directive, not inline style strings, for dynamic values
• Prefer CSS custom properties over :global for child styling
• Prefer class arrays/objects in class={...} for conditional classes
• Last verified: 2026-05-14