Svelte：将类添加到 div 不会将类 CSS 添加到 div

Question

我们遇到了一个问题，点击将类添加到div，但类CSS没有添加到div。它只是添加类。

<script>
function handleClick() {
document.getElementById('text').classList.add('blueText')
}
</script>
<style>
.blueText{
color:blue;
}
</style>
<button on:click={handleClick}>
Click me
</button>
<div id="text">
Text
</div>

创建了一个 REPL 来查看它。感谢任何解释或解决方案

https://svelte.dev/repl/85554a5f15134a5694c36fc4f4782029?version=3.23.2

Answer 1

Svelte 编译器会删除未使用的 CSS 规则，并且它只能看到组件标记中实际使用的类。

它必须这样做才能限定组件的 CSS 范围，因为作用域的工作原理是向具有匹配(作用域(CSS 规则的所有组件元素添加唯一生成的类。

在您的情况下，编译器在标记中看不到blueText类，如"未使用的 CSS 选择器"警告所示。

使用 Svelte 条件类具有编译器知道的条件(和作用域(类：

<script>
let isBlue = false

function handleClick() {
isBlue = !isBlue
}
</script>
<style>
.blueText {
color: blue;
}
</style>
<button on:click={handleClick}>
Click me
</button>
<div class:blueText={isBlue}>
Text
</div>

或者，使用快捷方式语法：

<script>
let blueText = false

function handleClick() {
blueText = !blueText
}
</script>
<style>
.blueText {
color: blue;
}
</style>
<button on:click={handleClick}>
Click me
</button>
<div class:blueText>
Text
</div>

如果你不希望你的条件类被限定范围，你可以简单地把它:global——Svelte 编译器从不修剪全局规则，它不需要。

<script>
function handleClick() {
document.getElementById('text').classList.add('blueText')
}
</script>
<style>
:global(.blueText) {
color: blue;
}
</style>
<button on:click={handleClick}>
Click me
</button>
<div id="text">
Text
</div>