Стилизация тега {@html ...} компонента Svelte с помощью встроенного тега <style>(Неиспользуемый селектор CSS) - PullRequest
Новая
       3

Стилизация тега {@html ...} компонента Svelte с помощью встроенного тега <style>(Неиспользуемый селектор CSS)

3 голосов
/ 15 июня 2019

Я пытаюсь добавить стили к тегу HTML, отображаемому внутри тега {@hml ...} компонента Svelte, но похоже, что он наследует только стиль родителя (контейнер {@html). ..} тег). Кроме того, появляется ошибка выбора неиспользуемого CSS, показывающая, что мой селектор стилей для этого конкретного тега HTML внутри тега Svelte {@html ...} просто не работает. Svelte построен таким образом и есть ли способ для стилизации тегов, которые отображаются внутри тега Svelte {@html ...}?

Я попытался выполнить шаги, описанные в официальном учебном пособии по Svelte, но они не совсем ясно показывают, как это сделать. 

<style>
    p{
        color: red;
    }
    h1{
        color: blue;
    }
</style>

<script>
    let string = "<h1>what</h1>";   
</script>

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

Я хочу, чтобы тег h1 был синим, а не наследовал красный цвет от тега p

Ответы [ 2 ]

2 голосов
/ 15 июня 2019

Вам необходимо использовать модификатор :global(...).Если вы сделаете это ... 

:global(h1) { color: blue }

... это будет применяться ко всем элементам <h1> на странице - как к элементу внутри тега {@html ...}, так и к элементам, которые существуют в других компонентах.

Чтобы ограничить его элементами внутри этого компонента, поместите селектор внутри локального: 

p :global(h1) { color: blue }

Этот селектор будет применяться только к <h1> элементам внутри <p> элементов, принадлежащих этому компоненту, Вот демоверсия

1 голос
/ 15 июня 2019

Это может быть ошибкой (но для Svelte кажется трудным узнать, что может быть в этой строке).

В качестве (некрасивого) обходного пути вы можете указать необходимый стиль встраивания. Например, 

<script>
    let string = `<h1 style="color:blue;">what</h1>`;   
</script>

РЕДАКТИРОВАТЬ : И Svelte создатель ответил, что официальный путь использует :global.

...