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

前言

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

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。
目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。
我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。
欢迎围观我的“网页版朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。
style:

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

1. ...
2. ...

复制代码

值可以包含任意表达式：

1. ...

复制代码

允许使用简写形式：

1. ...

复制代码

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

1. ...

复制代码

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

1. ...

复制代码

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

1. 这里将显示为红色

复制代码

class

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

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

1. ...

复制代码

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

对象和数组

从 Svelte 5.16 开始，class 可以是对象或数组，并使用 clsx 转换为字符串。
如果值是一个对象，则会添加真值的键：

1. ...

复制代码

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

1. ...

复制代码

注意，无论我们使用数组还是对象形式，我们都可以用一个条件同时设置多个类，这在使用 Tailwind 等工具时特别有用。
数组可以包含数组和对象，clsx 会将它们展平。这对于合并本地类和 props 特别有用，例如：

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

复制代码

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

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

复制代码

class: 指令

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

1. ...
2. ...

复制代码

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

1. ...

复制代码

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

Svelte 中文文档

本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。
系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog
通过文字建立交流本身就是一种缘分。欢迎围观我的“网页版朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！