KolButton "_customClass"-Property ändert nicht das Aussehen des Buttons

[VladF146]

Hallo,

ich benutze die KoliBri-React-Components und wollte das default Styling eines Buttons ändern.

<KolButton _label="Upload" _variant="custom" _customClass="bg-emerald-500" _on={{ onClick: handleUpload }}></KolButton>

Die Klasse wird von UnoCSS generiert und funktioniert außerhalb des Buttons so wie sie soll.

In den DevTools kann ich sehen, dass die Klasse auch bis zum nativen <button> durchgereicht wird, im Styles pane wird sie mir aber nicht angezeigt.

Das Theme zu patchen geht nicht, weil nur das Styling eines einzelnen Buttons geändert werden soll.

Danke im Voraus und viele Grüße

VF

[deleonio]

Hallo @VladF146,

vielen Dank für Deine Frage.

Das Konzept hinter der _customClass ist etwas anders gedacht. Das Styling ist immer gekapselt - somit greift äußeres CSS i.d.R. nicht.

Mit dem Designer kannst Du beliebig viele Styling-Varianten für den Button anlegen und diese Custom-Class reinreichen.

Kleines Beispiel für ein Loading-Icon:

button.loading > kol-span-wc kol-icon {
  animation: spin 5s infinite linear;
}

Sehr gerne kannst du auch ein kleines Stackblitz oder CodesandBox Projekt anlegen.