Выбрать один класс в компоненте Svelte?

Question

<script>
export let text
</script>

<button>
  {text}
</button>

<style>
:global(.bg-primary) {
    background-color: red ;
}
:global(.bg-secondary {
    background-color: blue;
}
</style>

Когда я импортирую свой компонент в другой компонент, я хотел бы настроить цвет фона с помощью опоры

Answer 1

<script>
export let text
export let type = 'secondary'
</script>

<button class="bg-{type}">
 {text}
</button>

или же

<button class:bg-primary={type === 'primary'}  class:bg-secondary={type === 'secondary'}>
 {text}
</button>

Второй подход ограничивает количество классов и лучше работает с простой проверкой неиспользуемых классов.