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

Question

我们遇到了一个问题，点击事件会将一个类添加到一个 div 上，但是这个类的 CSS 没有被应用到这个 div 上。它只是添加了这个类。

我们遇到了一个问题，点击后会给一个 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

- Karl Põdra

---

你正在引用一个类，但只给了<div>一个“id”。尝试为<div>添加一个类。 - Sablefoste

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>

- rixo