Gibt es eine Möglichkeit, CSS zu ändern, indem ich auf ein Ereignis klicke, ohne den Status als Reaktion zu verwenden?

Ich stelle eine Chipkomponente her und möchte sie wiederverwendbar machen. Da der Zustand nicht in jeder Komponente verwendet wird, die diese Chipkomponente verwendet, möchte ich den Zustand nicht verwenden und die Hintergrundfarbe ändern, wenn darauf geklickt und nicht geklickt wird. Wie kann ich es verwenden, ohne den React-Hook-Zustand zu verwenden? Ich verwende jetzt Emotion/Reaktion (Typoskript) für dieses Projekt.

Beispiel eines nicht angeklickten Chips

Beispiel für angeklickten Chip

Lösung des Problems

Sie könnten das CSS mit einem Trick mit versteckten Kontrollkästchen verwenden. Es verwendet ein verstecktes HTML-Kontrollkästchen, das ein- und ausgeschaltet wird, wenn Sie auf die Komponente klicken.

Eine alternative Lösung wäre, die Komponente ihren eigenen Zustand handhaben zu lassen (dh unabhängig vom Zustand ihrer übergeordneten Komponente).