Используйте класс svelte css в @html - PullRequest
Новая
       5

Используйте класс svelte css в @html

1 голос
/ 18 марта 2020

У меня есть API, который возвращает html с классами, я хочу знать, как я могу использовать определение стиля svelte для них.

App.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)

1 Ответ

2 голосов
/ 18 марта 2020

Svelte удалит все CSS, которые он не может найти в разметке, поэтому он удаляет класс status в вашем образце. Однако есть способ сказать Svelte оставить эти классы в покое, просто объявив их global :

:global(.status) { }

Остерегайтесь того, что эти стили будут применяться к ALL .status классы в вашем приложении, чтобы все еще иметь некоторую область видимости, вы можете сделать это как-то дочерним селектором 


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

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

Таким образом, он будет применяться только к статус классы внутри оболочки .

...