Material UI Chips - stoppen sie die Farbe zu ändern, wenn aktiv

Question

Wenn Sie beachten Chip Nummer 3 unten hat eine etwas dunklere Hintergrundfarbe, weil ich darauf geklickt habe und es aktiv ist. Es ist jedoch nicht notwendig, die Farbe beim Klicken/Aktivieren zu ändern, da nur die Schaltfläche Löschen eine Funktion hat, so dass der Chip, der bei Klick/Aktiv dunkler wird, keine Bedeutung hat.

Wie kann ich das Styling einstellen, um diese Hintergrundfarbe zu ändern, wenn ein Benutzer auf den Chip klickt?

Ich denke, das benutzerdefinierte Styling muss von reagieren. In den Devtools habe ich gewählt, um das Element ': aktiv' zu machen, aber es ändert seine Farbe nicht, also denke ich nicht, dass es tatsächlich '' aktiv '' aus einer CSS-Perspektive ist. Das Styling stammt allesamt von React und der Material-UI-Bibliothek. Ich denke, wir müssen das benutzerdefinierte Styling in der React-Komponente anwenden, damit es funktioniert.

Answer 1

Es besteht jedoch keine Notwendigkeit, es zu verfärben geklickt/aktiv zu werden, da nur die Löschtaste eine Funktion

hat bitte in der Dokumentation:

"Da die Eigenschaft onTouchTap nicht definiert ist, kann der Chip zwar fokussiert werden, erhält aber beim Klicken oder Berühren keine Tiefe."

http://www.material-ui.com/#/components/chip

Der Chip Farbe Fokus hat, so dass ein Benutzer sagen kann, wenn es fokussiert wird (entweder durch Tastatur, Maus oder Touch). Ein fokussierter Chip empfängt die Rückwärts-Tastatureingabe, so dass der Benutzer einen visuellen Hinweis benötigt, welcher Chip gelöscht werden soll.

Quelle: Ich schrieb die Chip-Komponente.