У меня есть приложение, в котором я использую Material UI и его поставщика тем (используя JSS).
Сейчас я включаю fullcalendar-response , который на самом деле не является полноценной библиотекой React - это всего лишь тонкая оболочка компонента React вокруг исходного кода fullcalendar.
То есть, у меня нет доступа к таким вещам, как реквизит рендера, чтобы контролировать, как он стилирует свои элементы.
Тем не менее, он дает вам доступ к элементам DOM напрямую через обратный вызов, который вызывается при их рендеринге (например, метод eventRender ).
Вот базовая демонстрационная песочница.
Теперь я хочу, чтобы компоненты Full Calendar (например, кнопки) имели такой же внешний вид, как и остальные части моего приложения.
Одним из способов сделать это является то, что я мог бы вручную переопределить все стили, посмотрев на имена классов, которые он использует, и соответственно реализовав стиль.
Или - я мог бы реализовать тему Bootstrap - как предложено в их документации.
Но проблема с любым из этих решений заключается в том, что:
- Было бы много работы
- У меня были бы проблемы с синхронизацией, если бы я внес изменения в свою тему MUI и забыл обновить тему календаря, они бы выглядели иначе.
То, что я хотел бы сделать, это либо:
- Магически преобразуйте тему MUI в тему Bootstrap.
- Или создайте отображение между именами классов MUI и именами классов календаря, например:
.fc-button = .MuiButtonBase-root.MuiButton-root.MuiButton-contained
.fc-button-primary= .MuiButton-containedPrimary
Я не возражаю против того, чтобы массировать селекторы и т. Д., Чтобы они работали (например, например, кнопки MUI имеют два внутренних пролета, тогда как в полном календаре только один). В основном это касается того, когда я меняю тему - не хочу менять ее в двух местах.
Использование чего-то вроде Sass с его @extend
синтаксисом - вот что я имею в виду. Я мог бы легко создать полноценный календарь CSS с помощью Sass - но как Sass получит доступ к MuiTheme?
Возможно, я мог бы использовать противоположный подход - сказать MUI: «Эй, здесь имена этих классов должны быть стилизованы под эти классы MUI».
Какие-нибудь конкретные предложения о том, как бы я решил это?
источник
text-decoration
свойство в шлем.style
тегами MUI и добавлять их.fc-
селекторы в соответствии с картой, но у них есть конфликты на базовых уровнях (напримерdisplay
,padding
и т. Д.), Поэтому я не вижу, как это будет работать, даже если у вас будет возможность перенести его в scss. Например: codesandbox.io/s/charming-sound-3xmj9Вы можете создать отображение между именами классов MUI и именами классов календаря, пройдя через
ref
. Вполне возможно, что это не то, что некоторые называют «лучшей практикой» ... но это решение :). Обратите внимание, что я обновил ваш компонент с функционального компонента до компонента класса, но вы могли бы сделать это с помощью хуков в функциональном компоненте.Добавить ссылки
Добавьте
ref
элемент MUI, который вы хотите установить в качестве ссылки, в вашем случае -Button
.И
ref
обернутьdiv
вокруг компонента, который вы хотите сопоставить. Вы не можете добавить его непосредственно к компоненту, так как это не даст нам доступ кchildren
.Классы карты
От
componentDidMount()
оных любую логику вам нужно настроить таргетинг на правильный узел DOM (для вашего случая, я добавил логикуtype
иmatchingClass
). Затем запустите эту логику на всех DOM-узлах FullCalendar и заменитеclassList
все соответствующие.Это может быть немного сложным делом, но оно соответствует вашим требованиям к будущему при обновлении пользовательского интерфейса обновления материала. Это также позволит вам изменять его
classList
при передаче элементу, который имеет очевидные преимущества.Предостережения
Если компонент 'mapped-to'
FullCalendar
обновил классы на целевых элементах (например, если он добавлен.is-selected
к текущей кнопке) или добавил новые кнопки после монтирования, вам нужно будет найти способ отследить соответствующие изменения и выполнить повторно. логикаЯ должен также упомянуть, что (очевидно) изменение классов может иметь непредвиденные последствия, такие как нарушение пользовательского интерфейса, и вам придется выяснить, как их исправить.
Вот рабочая песочница: https://codesandbox.io/s/determined-frog-3loyf
источник