Как передавать классы из компонентов с уже существующими стилями в Svelte?

#svelte

#стройная

Вопрос:

У меня есть два компонента, которые называются One.svelte и Two.svelte

Вот как One.svelte это выглядит:

 <Two class="mt-8 border"/> //example tailwind classes
 

Как Two.svelte выглядит:

 <main class="mt-6 bg-red-500">...</main>
 

Я хочу main , чтобы элемент Two.svelte использовал классы, переданные из One.svelte , не удаляя существующие классы на Two.svelte like mt-6 bg-red-500 и т.д.

Что я пробовал:

Two.svelte

 <main class="mt-6 bg-red-500 {{$props.class}}">...</main>
 

Похоже, это не работает, как правильно подойти к этой проблеме?

Ответ №1:

Попробуй:

 <main class={`mt-6 bg-red-500 ${$props.class}`}>
 

https://svelte.dev/repl/bb87bc86cc5c4fe0b7ba6472533af667?version=3.31.2