在 svelte 中设置 body 元素的样式
Styling the body element in svelte
我的目标是为我的网络应用程序制作暗模式。
要获得我的设置，请输入 npm init vite 并选择 svelte 作为框架。然后按照命令行说明进行操作。转到 src > App.svelte:
尝试以下操作：
body {
background: black;
}
您将通过 vs-code 中的 svelte 扩展程序收到以下警告：
Unused CSS selector "body"
为了检查这个错误是否与浏览器有关，我在 chrome 开发工具中手动设置了 属性 并且达到了预期的结果。
因此我有以下问题：
- 为什么 svelte 不允许以这种方式设置 body 的样式？
- 如何在 svelte 中设置 body 标签的样式？
- 如何实现暗模式？
Why doesn't svelte allow styling of the body in this way?
因为 svelte 样式默认范围。您必须明确告诉 svelte 您想要全局应用样式。
How can you style the body tag in svelte?
您想使用 css 选择器 :global(body) 而不是 body。
How would darkmode be implemented?
使用 :global(body.dark-mode) 选择器以类似于 :global(body) 样式的方式。
Here is an example.
我的目标是为我的网络应用程序制作暗模式。
要获得我的设置，请输入 npm init vite 并选择 svelte 作为框架。然后按照命令行说明进行操作。转到 src > App.svelte:
尝试以下操作：
body {
background: black;
}
您将通过 vs-code 中的 svelte 扩展程序收到以下警告：
Unused CSS selector "body"
为了检查这个错误是否与浏览器有关，我在 chrome 开发工具中手动设置了 属性 并且达到了预期的结果。
因此我有以下问题：
- 为什么 svelte 不允许以这种方式设置 body 的样式？
- 如何在 svelte 中设置 body 标签的样式？
- 如何实现暗模式？
Why doesn't svelte allow styling of the body in this way?
因为 svelte 样式默认范围。您必须明确告诉 svelte 您想要全局应用样式。
How can you style the body tag in svelte?
您想使用 css 选择器 :global(body) 而不是 body。
How would darkmode be implemented?
使用 :global(body.dark-mode) 选择器以类似于 :global(body) 样式的方式。
Here is an example.