javascript - 根据 Svelte 中的变量设置 CSS 类

Question

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

现在，我正在为每个“类型”导出一个 bool 值，可以将其设置为 true 或 false，从而启用具有相同名称或不同名称的类。

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}