Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Benji 0]

Hallo zusammen und frohe Weihnachten.

Gibt es eine zentrale Stelle, an der man die neuerdings grüne Systemfarbe (vor kurzem noch blau) ändern kann, welche beim Bestätigen von Button, beim Selektieren von Input Feldern und sonstigen Widget Änderungen erscheint?

Beste Grüße
Benjamin

[Benji 0]

Niemand eine Idee, wie man diese fiese grüne Farbe abändern kann? Insbesondere bei den Widgets "Gestylt". Anbei ein Screenshot...

[OliverIO]

@Benji-0

theoretisch über das theme, aber das scheint nicht richtig zu funktionieren
Ansonsten nur auf Einzelfallebene per Css
Jedes widget ist aber ein wenig anders aufgebaut

[Benji 0]

Hallo Oliver,

Woher weiß ich, was für ein CSS ich verwenden soll? Gibt es eine Tabelle?

[OliverIO]

@Benji-0

wenn der entwickler des widgets diese information nicht bereitstellt musst du selber schauen.
leider hast du keine Informationen geliefert welche gestyled widgets es sind, noch einen widget export geliefert.
selber kann man das über die web developer tools F12 im browser ermitteln. Man muss allerdings etwas suchen

Am Beispiel eines buttons
Mit dem Positionierwerkzeug kann man grob das Element markieren.
Die Anzeige springt auf das entsprechende HTML

Hier musste ich noch weiter in der Hierarchie heruntergehen bis ich das Setting gefunden habe.
In diesen Fall am Element button die backgroundColor

Dieses Setting hängt an der CSS-Klasse .css-c8ol8z
Da mui/react mit gehashten css Klassen arbeitet, die jedesmal mit einer neuen ID dynamisch erzeugt werden, kann man das nicht nehmen. Im Button -Element findet man unter dem class-Attribut eine ganze Reihe von Möglichkeiten von denen man sich dann eins aussuchen kann. Ich würde jetzt einfach MuiButtonBase-root nehmen

MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-c8ol8z

Das in den CSS-Reiter eingesetzt führt aber zu einem eher unerwarteten Ergebnis

.MuiButtonBase-root {
    background-color: red;;
}

daher muss man weiter spezialisieren. Am leichtesten wäre es, wenn du in der General Einstellungen des widgets eine eigene css Klasse definierst, bsp mycolor (du kannst aber beliebig definieren)

und passe dann mein css setting entsprechend an

.mycolor .MuiButtonBase-root {
    background-color: red;;
}

Dann passt auch wieder das Gesamterscheinungsbild

Prüfe bitte trotzdem ob auf github beim vis2 adapter bereits ein entsprechender issue existiert.
evtl kommentierst du, das es dich auch betrifft. umso mehr ein issue kommentiert wird umso eher wird er sichtbar und die chance auf fix wird erhöht.
Wenn noch kein issue dazu existiert erstelle bitte einen mit einer möglichst exakten Darstellung und genügend Informationen wie man das nachstellen/testen kann ohne groß experimente machen zu müssen.

[Bernd1967]

Hier wurde eins angelegt: Github Link