CODEWITHSUNDEEP
svelte
rohanharikr
rohanharikr

Reputation: 1811

How to pass classes from components with already existing styles in Svelte?

I have two components called One.svelte and Two.svelte

This is how One.svelte looks like:

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

How Two.svelte looks like:

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

I want the main element of Two.svelte to use the classes passed from the One.svelte without removing the existing classes on Two.svelte like mt-6 bg-red-500 etc.

What I tried:

Two.svelte

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

This does not seem to work, what is the right way to approach this issue?

Upvotes: 5

Views: 6443

Answers (1)

CD..
CD..

Reputation: 74096

Try:

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

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

Upvotes: 11

Related Questions