Svelte 最新中文文档教程（12）—— 样式相关 style 与 class

[mqyqingfeng]

前言

Svelte，一个非常“有趣”、用起来“很爽”的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。

目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。

我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。

欢迎围观我的“网页版朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

style:

style: 指令提供了在元素上设置多个样式的简写方式。

<!-- 这两种方式是等价的 -->
<div style:color="red">...</div>
<div style="color: red;">...</div>

值可以包含任意表达式：

<div style:color={myColor}>...</div>

允许使用简写形式：

<div style:color>...</div>

可以在单个元素上设置多个样式：

<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>

要将样式标记为 important，使用 |important 修饰符：

<div style:color|important="red">...</div>

当 style: 指令与 style 属性组合使用时，指令将优先生效：

<div style="color: blue;" style:color="red">这里将显示为红色</div>

class

在元素上设置类名有两种方式：class 属性和 class: 指令。

属性

原始值的处理方式与其他属性相同：

<div class={large ? 'large' : 'small'}>...</div>

Note

由于历史原因，假值（如 false 和 NaN）会被转换为字符串（class="false"），但 class={undefined}（或 null）会导致属性被完全省略。在 Svelte 的未来版本中，所有假值都将导致 class 被省略。

对象和数组

从 Svelte 5.16 开始，class 可以是对象或数组，并使用 clsx 转换为字符串。

如果值是一个对象，则会添加真值的键：

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

<!-- 如果 `cool` 为真则结果为 `class="cool"`，
     否则为 `class="lame"` -->
<div class={{ cool, lame: !cool }}>...</div>

如果值是一个数组，真值会被合并：

<!-- 如果 `faded` 和 `large` 都为真，结果为
     `class="saturate-0 opacity-50 scale-200"` -->
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>

注意，无论我们使用数组还是对象形式，我们都可以用一个条件同时设置多个类，这在使用 Tailwind 等工具时特别有用。

数组可以包含数组和对象，clsx 会将它们展平。这对于合并本地类和 props 特别有用，例如：

<!--- file: Button.svelte --->
<script>
  let props = $props();
</script>

<button {...props} class={['cool-button', props.class]}>
  {@render props.children?.()}
</button>

该组件的用户可以灵活地混合使用对象、数组和字符串：

<!--- file: App.svelte --->
<script>
  import Button from './Button.svelte';
  let useTailwind = $state(false);
</script>

<Button
  onclick={() => useTailwind = true}
  class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
  接受 Tailwind 的必然性
</Button>

class: 指令

在 Svelte 5.16 之前，class: 指令是在元素上条件设置类的最便捷方式。

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

与其他指令一样，当类名与值相同时，我们可以使用简写形式：

<div class:cool class:lame={!cool}>...</div>

[!NOTE] 除非你使用的是较旧版本的 Svelte，否则建议避免使用 class:，因为属性形式更强大且更易于组合。

Svelte 中文文档

本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。

系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog

通过文字建立交流本身就是一种缘分。欢迎围观我的“网页版朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。