将身体元素设计得苗条

Question

我的目标是为我的网络应用程序制作暗模式。为了让我的设置进入npm init vite并选择 svelte 作为框架。然后按照命令行说明进行操作。转到 src > App.svelte：

请尝试以下操作：

body {
    background: black;
}

您将通过 vs-code 中的 svelte 扩展收到以下警告：

Unused CSS selector "body"

为了检查这个错误是否与浏览器有关，我在 chrome 开发工具中手动设置了该属性，并达到了预期的结果。

因此我有以下问题：

• 为什么 svelte 不允许以这种方式塑造身体造型？
• 如何将 body 标签设置为 svelte 样式？
• 深色模式如何实现？

Answer 1

为什么 svelte 不允许以这种方式塑造身体造型？

因为默认情况下， svelte 样式是有范围的。您必须明确告诉 svelte 您想要全局应用样式。

如何将 body 标签设置为 svelte 样式？

您想使用 css 选择器:global(body)而不是body.

深色模式如何实现？

:global(body)使用选择器以类似的方式设置样式:global(body.dark-mode)。 这是一个例子。