根据 Svelte 中的变量设置 CSS class

Question

我正在使用 Svelte 开发自定义组件，我希望能够借助相应的标识符（我称为类型）设置颜色。例如成功-> 绿色，错误-> 红色等

现在我正在为每个 "types" 导出一个布尔值，可以将其设置为 true 或 false，因此是否启用具有相同名称的 class。

let success = false;
let error = false;
let info = false;
let warning = false; 
...
<div
    class:success
    class:error
    class:info
    class:warning >
</div>

这样，用户每次想要更改类型时都必须禁用其中一种类型以外的所有类型。

有没有一种方法可以像这样几乎是伪代码来做到这一点 :D

export let type = "";
...
<div
    class:{type} >
</div>

因此用户可以按以下方式使用它。

<custom-comp type={warning} />

Answer 1

我自己找到了答案。

我只需要使用：

class="{type}"

而不是：

class:{type}

根据 Svelte 中的变量设置 CSS class

Setting a CSS class based on a variable in Svelte

javascript

css

svelte