在 @html 中使用 svelte css class

Question

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

App.Svelte

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

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

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

{@html marked}

Returns Unused CSS selector (8:1)

Answer 1

Svelte 将删除它在标记中找不到的所有 CSS，这就是它删除示例中的 status class 的原因。然而，有一种方法可以告诉 Svelte 不理会这些 classes，只需将它们声明为 global:

:global(.status) { }

请注意，这会将这些样式应用于您应用中的 ALL .status classes，以便仍然有一些确定范围，您可以以某种方式将其设为子选择器


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

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

这样它只会应用于 status classes inside wrapper.

在 @html 中使用 svelte css class

Use svelte css class in @html

svelte