在 @html 中使用 svelte css 类

Question

我有一个返回带有类的 html 的 api，我想知道如何为它们使用 svelte 样式定义。

应用程序.Svelte

<script>
    let string = `<span class="status">ok</span>`;
</script>

<p>{@html string}</p>

<style>
    .status {
        color: red
    }
</style>
... 

{@html marked}

退货 Unused CSS selector (8:1)

Answer 1

Svelte 将删除它在标记中找不到的所有 CSS，这就是它删除status示例中的类的原因。然而，有一种方法可以告诉 Svelte 不要管这些类，那就是简单地将它们声明为全局的：

:global(.status) { }

请注意，这会将这些样式应用于应用程序中的所有 .status类，为了仍然具有一些范围，您可以以某种方式将其设为子选择器

<style>
 .wrapper > :global(.status) {
 }
</style>

<div class="wrapper">
  {@html marked}
</div>

这样它只会应用于包装器内部的状态类。