Как нацелить компонент в svelte с css?

Question

Как бы я сделал что-то вроде этого:

<style>
Nested {
    color: blue;
}
</style>

<Nested />

т.е. Как применить стиль к компоненту из его родителя?

Answer 1

Я могу думать только о дополнительном элементе div.

App.svelte

<script>
    import Nested from './Nested.svelte'    
</script>

<style>
    div :global(.style-in-parent) {
        color: green;
    }
</style>

<div>
    <Nested />  
</div>

Nested.svelte

<div class="style-in-parent">
    Colored based on parent style
</div>

Несколько вложенных элементов

Вы можете даже позволить имени класса быть динамическим и иметь разные цвета, если вы используете несколько компонентов Nested.Вот ссылка на рабочий пример .

Answer 2

Я посмотрел и не нашел ничего релевантного (возможно, здесь ), поэтому здесь есть альтернатива, добавив <div> вокруг вашего пользовательского компонента.

<style>
.Nested {
    color: blue;
}
</style>
<div class="Nested">
   <Nested />
</div>

Может быть, вы найдете что-нибудь, но этот работает.