Tengo este componente BigButton donde quiero pasar un accesorio bgColor:
<BigButton title="Join a Game" description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, est?" icon="star" bgColor="blue-500" />luego en el componente lo manejo en el gancho onMount:
<script lang="ts"> import { onMount } from 'svelte'; export let title: string; export let description: string = ''; export let icon: string; export let bgColor: string | undefined; let iconUrl: string; onMount(() => { if (icon) iconUrl = `/icons/${icon}@2x.png`; if (bgColor) bgColor = `bg-${bgColor}`; }); </script> <div class="flex flex-row w-96 rounded-3xl p-6 justify-center place-items-center {bgColor ? bgColor : 'bg-slate-400'}" >el componente se representa con el nombre de la clase pero no se aplica el estilo.
Hice algo similar con el icono prop, que funciona:
<img src={iconUrl} alt="gold star" />Está utilizando Tailwind, esto depende en gran medida del procesamiento posterior del código. Supongo que si no incluye el nombre completo de la clase, el CSS correspondiente no se incluirá en la salida, porque incluir todas las clases posibles de Tailwind crearía un archivo enorme.
Si sabe qué clases serán posibles, también puede intentar forzar la inclusión de esos estilos .