Mam aplikację, w której korzystam z Material UI i jej dostawcy motywów (używając JSS).
Teraz włączam funkcję fullcalendar-reag , która nie jest tak naprawdę pełnoprawną biblioteką React - to tylko cienkie opakowanie komponentu React wokół oryginalnego kodu fullcalendar.
To znaczy, że nie mam dostępu do takich rzeczy, jak renderowanie rekwizytów, aby kontrolować, jak stylizuje swoje elementy.
Daje jednak dostęp do elementów DOM bezpośrednio, poprzez wywołanie zwrotne, które jest wywoływane podczas ich renderowania (np. Metoda eventRender ).
Oto podstawowa piaskownica demo.
Teraz chcę, aby komponenty Full Calendar (np. Przyciski) miały ten sam wygląd i działanie, co reszta mojej aplikacji.
Jednym ze sposobów, aby to zrobić, jest to, że mogę ręcznie zastąpić wszystkie style, sprawdzając nazwy klas, których używa, i odpowiednio wdrażając styl.
Lub - mógłbym wdrożyć motyw Bootstrap - zgodnie z sugestią w ich dokumentacji.
Problem z jednym z tych rozwiązań polega na tym, że:
- To byłoby dużo pracy
- Miałem problemy z synchronizacją, jeśli dokonałbym zmian w motywie MUI i zapomniałem zaktualizować motyw kalendarza, wyglądałyby inaczej.
Chciałbym albo:
- Magicznie przekonwertuj motyw MUI na motyw Bootstrap.
- Lub utwórz mapowanie między nazwami klas MUI a nazwami klas kalendarza, na przykład:
.fc-button = .MuiButtonBase-root.MuiButton-root.MuiButton-contained
.fc-button-primary= .MuiButton-containedPrimary
Nie miałbym nic przeciwko masowaniu selektorów itp., Aby działało (tj. Na przykład - przyciski MUI mają dwa wewnętrzne zakresy, podczas gdy pełny kalendarz ma tylko jeden). Chodzi przede wszystkim o zmianę motywu - nie chcę go zmieniać w dwóch miejscach.
@extend
Używam czegoś takiego jak Sass ze składnią, co mam na myśli. Mógłbym łatwo stworzyć pełny kalendarz CSS z Sass - ale w jaki sposób Sass miałby uzyskać dostęp do MuiTheme?
Być może mógłbym przyjąć odwrotne podejście - powiedz MUI: „Hej, te nazwy klas powinny być stylizowane jak te klasy MUI”.
Jakieś konkretne sugestie, jak to rozwiązać?
źródło
text-decoration
właściwość do kasku.style
tagi i dodać je.fc-
selektorów zgodnie mapie ale mają konfliktów poziomów bazowych (takich jakdisplay
,padding
itd.), Więc nie wiem, jak to będzie działać nawet gdyby masz opcja migracji do scss. Na przykład : odesandbox.io/s/charming-sound-3xmj9Możesz utworzyć odwzorowanie między nazwami klas MUI a nazwami klas kalendarza, przechodząc do nich
ref
. Możliwe, że niektórzy nie nazywają tego „najlepszą praktyką” ... ale to rozwiązanie :). Zauważ, że zaktualizowałem twój komponent z komponentu funkcjonalnego do komponentu klasy, ale możesz to zrobić za pomocą zaczepów w komponencie funkcjonalnym.Dodaj referencje
Dodaj element
ref
do elementu MUI, który chcesz ustawić jako odniesienie, w twoim przypadkuButton
.I
ref
na zawijaniediv
wokół komponentu, na który chcesz zmapować. Nie możesz dodać go bezpośrednio do komponentu, ponieważ nie dałoby nam to dostępuchildren
.Klasy map
Od
componentDidMount()
dodania dowolnej logiki, której potrzebujesz, aby kierować na właściwy węzeł DOM (dla twojego przypadku dodałem logikę dlatype
imatchingClass
). Następnie uruchom tę logikę na wszystkich węzłach DOM FullCalendar i zamieńclassList
na wszystkie pasujące.Jest to może trochę trudne, ale spełnia twoje przyszłe wymagania dotyczące aktualizacji po aktualizacji interfejsu Material Material. Pozwoliłoby to również na zmianę
classList
elementu, który przekazujesz do elementu, co ma oczywiste zalety.Ostrzeżenia
Jeśli komponent „zamapowany na” (
FullCalendar
) zaktualizował klasy na elementach, na które celujesz (na przykład, jeśli dodano go.is-selected
do bieżącego przycisku) lub doda nowe przyciski po zamontowaniu, musisz znaleźć sposób na śledzenie odpowiednich zmian i ponowne uruchomienie logika.Powinienem również wspomnieć, że (oczywiście) zmienianie klas może mieć niezamierzone konsekwencje, takie jak zepsuty interfejs użytkownika, a ty musisz wymyślić, jak je naprawić.
Oto działająca piaskownica: https://codesandbox.io/s/determined-frog-3loyf
źródło