26. class: 与 style: 指令

本节目标：学会用 class: 指令根据条件添加类名，用 style: 指令绑定内联样式，掌握 class 属性的对象和数组写法。

class: 条件类名

在网页开发中，根据状态切换 CSS 类名是高频操作。Svelte 提供了 class: 指令让这件事变得简单。

<script>
	let isActive = $state(true);
</script>

<!-- 当 isActive 为 true 时，添加 active 类 -->
<div class:active={isActive}>
	点击切换状态
</div>

<style>
	.active {
		background: #4caf50;
		color: white;
	}
</style>

简写形式

当类名和变量名相同时，可以省略值部分。

<script>
	let active = $state(false);
	let disabled = $state(true);
</script>

<!-- 简写：类名和变量名相同 -->
<button class:active class:disabled={disabled}>
	按钮
</button>

多个条件类名

一个元素可以有多个 class: 指令。

<script>
	let isPrimary = $state(true);
	let isLarge = $state(false);
	let isDisabled = $state(false);
</script>

<button
	class:primary={isPrimary}
	class:large={isLarge}
	class:disabled={isDisabled}
>
	按钮
</button>

class 属性的对象写法

从 Svelte 5.16 开始，class 属性可以直接接受对象。对象的 truthy 键会被添加为类名。

<script>
	let { cool } = $props();
</script>

<!-- cool 为 true 时添加 cool 类，否则添加 lame 类 -->
<div class={{ cool, lame: !cool }}>
	条件类名
</div>

这跟 class: 指令的效果一样，但写在一个属性里更紧凑。

<!-- 这两种写法等价 -->
<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>

class 属性的数组写法

class 属性也支持数组，truthy 值会被组合成类名字符串。

<script>
	let faded = $state(true);
	let large = $state(false);
</script>

<!-- 结果：class="saturate-0 opacity-50" -->
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>
	数组类名
</div>

Tip

数组写法特别适合配合 Tailwind CSS 使用。你可以在一个条件下列出多个 Tailwind 类名。

混合使用 class 属性和 class: 指令

class 属性和 class: 指令可以同时使用，它们会合并。

<script>
	let isDark = $state(true);
	let isActive = $state(true);
</script>

<!-- 基础类名放 class 属性，条件类名放 class: 指令 -->
<div class="card" class:dark={isDark} class:active={isActive}>
	混合使用
</div>

style: 内联样式绑定

style: 指令是设置内联样式的简写方式。

<script>
	let color = $state('red');
</script>

<!-- 这两种写法等价 -->
<div style:color="red">红色文字</div>
<div style="color: red;">红色文字</div>

<!-- 可以绑定变量 -->
<div style:color={color}>变量颜色</div>

多个样式属性

一个元素可以设置多个 style: 指令。

<script>
	let darkMode = $state(false);
	let width = $state('200px');
</script>

<div
	style:color={darkMode ? 'white' : 'black'}
	style:background-color={darkMode ? 'black' : 'white'}
	style:width={width}
	style:padding="12px"
>
	多样式属性
</div>

简写形式

跟 class: 一样，style: 也支持简写。

<script>
	let color = $state('blue');
	let fontSize = $state('16px');
</script>

<!-- 变量名和 CSS 属性名相同时可简写 -->
<div style:color style:font-size={fontSize}>
	简写样式
</div>

important 修饰符

用 |important 可以标记样式为 !important。

<div style:color|important="red">
	!important 红色
</div>

Note

当 style: 指令和 style 属性同时存在时，style: 的值优先级更高，即使 style 属性里写了 !important 也会被覆盖。

CSS 自定义属性

style: 也可以设置 CSS 自定义属性（CSS 变量）。

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

<div style:--columns={columns}>
	网格布局
</div>

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

class: vs class 属性：用哪个

写法	适用版本	优势
`class:` 指令	所有 Svelte 5 版本	简洁直观
`class={对象}`	Svelte 5.16+	多条件聚合在一个属性
`class={数组}`	Svelte 5.16+	适合 Tailwind 类名组合

Note

官方建议：如果你用的是 Svelte 5.16 以上版本，优先用 class 属性的对象/数组写法，因为它更强大、更可组合。class: 指令仍然可用，但在未来可能被弱化。

本节回顾

class:className={条件} 根据条件添加类名，支持简写
class 属性支持对象写法（{ active, disabled: !active }）和数组写法
style:property={值} 绑定内联样式，支持简写和 |important 修饰符
style: 可以设置 CSS 自定义属性（style:--color={color}）
style: 指令优先级高于 style 属性
推荐使用 class 属性的对象/数组写法替代 class: 指令