Как стилизовать содержимое элемента в Svelte? - PullRequest
Новая
       145

Как стилизовать содержимое элемента в Svelte?

1 голос
/ 27 мая 2020 
<style>

  color: red;

</style>

Some html content!

этот код не работает. В структуре Angular это можно сделать с помощью селектора :host. :global не может помочь в моем случае, потому что я просто хочу стилизовать компонент, где эти стили написаны. Как это сделать в Svelte? Спасибо

PS. Я новичок в Svelte :)

1 Ответ

2 голосов
/ 27 мая 2020 
<style>
  .hello {
    color: red;
  }
</style>

<div class='hello'>Hello world</style>

Это будет стилизовать все элементы с классом hello и только в этом компоненте.

Теперь, если мы сделаем что-то вроде этого

App. svelte 

<script>
    import A from './A.svelte'
    import B from './B.svelte'
</script>

<div>
    <A/>
    <B/>
</div>

A.svelte 

Hello

B.svelte 

world

затем svelte отображает это как 

<div>Hello world</div>

И там теперь способ определить селектор для стиля только «Привет», но не «слово». В документации также упоминается, что необходимо что-то для присоединения класса к:

CSS внутри блока будет привязано к этому компоненту.

Это работает путем добавления класса к затронутому elements, который основан на ha sh стилей компонентов (например, svelte-123xyz).

...