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

<style>

  color: red;

</style>

Some html content!

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

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


frontend svelte svelte-3
person nzZ    schedule 27.05.2020    source источник
comment
К вашему сведению: :global не могу помочь в моем случае, потому что я просто хочу стилизовать компонент, где эти стили написаны   -  person nzZ    schedule 27.05.2020
comment
Почему бы вам не использовать стиль в самом верхнем селекторе компонента? Допустим, это раздел, тогда он должен работать с section { color: red }.   -  person Gh05d    schedule 27.05.2020

Ответы (1)


arrow_upward
2
arrow_downward 

<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>

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

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

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

person Andreas Dolk    schedule 27.05.2020
comment
В Angular есть селектор :host, а в Svelte нет. Скорее всего, потому, что svelte позволяет использовать несколько корневых элементов в одном компоненте. - person Markus Siebeneicher; 06.01.2021