/ / Passen Sie das datumsfähige Kontrollkästchen für das Materialdesign an - css, reactjs, svg, material-design, material-ui

Anpassen des Materialdesign-Kontrollkästchens für Datentypen - css, reactjs, svg, material-design, material-ui

Ich habe gerade angefangen, Material-Ui-Design mit ReactJS zu verwenden. Ich bemühe mich, einen Checkbox-Stil zu ändern, der unter angezeigt wird <TableRow /> Komponente. (Tabellenkomponente)

Ich habe es schon probiert css Kontrollkästchen formatieren. Es sieht so aus, als hätte material-ui eine eigene Checkbox-Logik div und svg und heimisch verstecken checkbox Deckkraft für Element auf 0 setzen.

Irgendeine Idee, wie es erreicht werden kann?

Antworten:

1 für die Antwort № 1

Die materielle Benutzeroberfläche tut das wirklich. Das native Kontrollkästchenelement akzeptiert nicht viele Eigenschaften für das Styling, daher werden zur besseren Darstellung andere Elemente verwendet. Um ein Kontrollkästchen für die Materialbenutzeroberfläche anzupassen, müssen Sie Stile für diese Elemente anwenden.


1 für die Antwort № 2

Es gibt keine elegante Möglichkeit, das Kontrollkästchen anzupassenin einer auswählbaren Tabelle. Sie können jedoch die Checkbox-Komponente wie in den Dokumenten mit Herzsymbolen und ähnlichem anpassen. Als Problemumgehung können Sie Ihre Tabelle daher auf selectable = {false} setzen und Ihre eigene benutzerdefinierte Spalte hinzufügen, die angepasste Checkbox-Komponenten enthält. Sie müssen dann Ihre eigenen ausgewählten Zustände beibehalten und alle Funktionen auswählen, wenn Sie diese benötigen.