Ich habe eine Anwendung, in der ich die Material-Benutzeroberfläche und ihren Themenanbieter (mit JSS) verwende.
Ich verwende jetzt Fullcalendar- React, was eigentlich keine vollwertige React-Bibliothek ist - es ist nur ein dünner React-Komponenten-Wrapper um den ursprünglichen Fullcalendar-Code.
Das heißt, ich habe keinen Zugriff auf Dinge wie Render-Requisiten, um zu steuern, wie sie ihre Elemente formatieren.
Sie erhalten jedoch direkten Zugriff auf die DOM-Elemente über einen Rückruf, der beim Rendern aufgerufen wird (z. B. die eventRender-Methode ).
Hier ist eine grundlegende Demo-Sandbox.
Jetzt möchte ich dafür sorgen, dass die Komponenten des vollständigen Kalenders (z. B. die Schaltflächen) das gleiche Erscheinungsbild wie der Rest meiner Anwendung haben.
Eine Möglichkeit, dies zu tun, besteht darin, dass ich alle Stile manuell überschreiben kann, indem ich mir die verwendeten Klassennamen ansehe und den Stil entsprechend implementiere.
Oder - ich könnte ein Bootstrap-Thema implementieren - wie in der Dokumentation vorgeschlagen.
Das Problem bei jeder dieser Lösungen ist jedoch, dass:
- Es wäre viel Arbeit
- Ich hätte Synchronisationsprobleme, wenn ich Änderungen an meinem MUI-Thema vorgenommen und vergessen hätte, das Kalenderthema zu aktualisieren, würden sie anders aussehen.
Was ich tun möchte, ist entweder:
- Konvertieren Sie das MUI-Design auf magische Weise in ein Bootstrap-Design.
- Oder erstellen Sie eine Zuordnung zwischen MUI-Klassennamen und den Kalenderklassennamen.
.fc-button = .MuiButtonBase-root.MuiButton-root.MuiButton-contained
.fc-button-primary= .MuiButton-containedPrimary
Es würde mir nichts ausmachen, die Selektoren usw. massieren zu müssen, damit es funktioniert (z. B. - MUI-Schaltflächen haben zwei interne Bereiche, während der vollständige Kalender nur einen hat). Es geht hauptsächlich darum, wann ich das Thema ändere - ich möchte es nicht an zwei Stellen ändern müssen.
@extend
Ich habe vor, so etwas wie Sass mit seiner Syntax zu verwenden. Ich könnte das vollständige Kalender-CSS mit Sass leicht genug erstellen - aber wie würde Sass Zugriff auf das MuiTheme erhalten?
Vielleicht könnte ich den umgekehrten Ansatz wählen - sagen Sie MUI: "Hey, diese Klassennamen hier sollten wie diese MUI-Klassen gestaltet sein."
Irgendwelche konkreten Vorschläge, wie ich das lösen würde?
quelle
text-decoration
Eigenschaft dem Helm hinzuzufügen .style
Tags und sie hinzufügen.fc-
Selektoren nach der Karte , aber sie haben Konflikte in den Basisebenen (wiedisplay
,padding
etc.) , so sehe ich nicht , wie es auch funktioniert , wenn Sie das hätte Option zum Migrieren in scss. Zum Beispiel: Codesandbox.io/s/charming-sound-3xmj9Sie können eine Zuordnung zwischen MUI-Klassennamen und Kalenderklassennamen erstellen, indem Sie die durchgehen
ref
. Es ist möglich, dass dies nicht das ist, was manche als "Best Practice" bezeichnen würden ... aber es ist eine Lösung :). Beachten Sie, dass ich Ihre Komponente von einer Funktionskomponente zu einer Klassenkomponente aktualisiert habe. Sie können dies jedoch mit Hooks in einer Funktionskomponente erreichen.Refs hinzufügen
Fügen Sie
ref
dem MUI-Element, das Sie als Referenz festlegen möchten, ein hinzu, in Ihrem Fall dasButton
.Und ein
ref
Umbruchdiv
um die Komponente, der Sie zuordnen möchten. Sie können es nicht direkt zur Komponente hinzufügen, da wir dadurch keinen Zugriff darauf habenchildren
.Kartenklassen
Von
componentDidMount()
addieren , was Logik Sie den richtigen DOM - Knoten zum Ziel müssen (für Ihren Fall, habe ich Logik fürtype
undmatchingClass
). Führen Sie diese Logik dann auf allen FullCalendar-DOM-Knoten aus und ersetzen Sie sie auf allen übereinstimmenden KnotenclassList
.Dies ist vielleicht etwas umständlich, erfüllt jedoch Ihre Anforderungen an die Zukunftssicherheit, wenn Sie die Aktualisierung der Material-Benutzeroberfläche aktualisiert haben. Es würde Ihnen auch ermöglichen, das zu ändern,
classList
wenn Sie es an ein Element übergeben, was offensichtliche Vorteile hat.Vorsichtsmaßnahmen
Wenn die Komponente '
FullCalendar
) ' zugeordnet ( ) Klassen für die Elemente aktualisiert hat, auf die Sie abzielen (z. B. wenn sie.is-selected
einer aktuellen Schaltfläche hinzugefügt wurden ) oder nach dem Mounten neue Schaltflächen hinzufügt, müssen Sie einen Weg finden, um die relevanten Änderungen zu verfolgen und erneut auszuführen die Logik.Ich sollte auch erwähnen, dass (offensichtlich) das Ändern von Klassen unbeabsichtigte Konsequenzen haben kann, wie z. B. eine fehlerhafte Benutzeroberfläche, und Sie müssen herausfinden, wie Sie diese beheben können.
Hier ist die funktionierende Sandbox: https://codesandbox.io/s/determined-frog-3loyf
quelle