Подход
Мой подход заключался в создании двух партиалов:
_mdb-date-picker.scss
_mdb-time-picker.scss
Затем я написал свой пользовательский CSS в этих файлах и импортировал их в файл GLOBAL styles.scss приложения .
Пример
В этом примере я динамически назначаю класс сборщику дат ( сборщик свадеб ИЛИ крещение-picker ИЛИ wedbapt-picker ) и иметь CSS для каждого, чтобы изменить весь цвет фона верхнего заголовка и цвет круга, выбранного днем.Частичный пользовательский CSS:
.wedding-picker .picker__box .picker__header .picker__date-display,
.wedding-picker .picker__box .picker__header .picker__date-display .picker__weekday-display,
.wedbapt-picker .picker__box .picker__header .picker__date-display,
.wedbapt-picker .picker__box .picker__header .picker__date-display .picker__weekday-display {
background-color: $weddingColor;
font-weight: 400;
}
.wedding-picker .picker__box .picker__table .picker__day--selected,
.wedbapt-picker .picker__box .picker__table .picker__day--selected{
background-color: $weddingColor;
}
.baptism-picker .picker__box .picker__header .picker__date-display,
.baptism-picker .picker__box .picker__header .picker__date-display .picker__weekday-display {
background-color: $baptismColor;
font-weight: 400;
}
.baptism-picker .picker__box .picker__table .picker__day--selected {
background-color: $baptismColor;
}
Затем импортируйте их в свое приложение global styles.scss
@import "app/your/route/to/partial/mdb-date-picker"
Нажмите на ссылку, чтобы увидеть конечный результат: Выбор даты
ПРЕДУПРЕЖДЕНИЕ
Имейте в виду, что при таком подходе вам необходимо убедиться, Вы назначили идентификатор или класс для вашего средства выбора даты или времени и написали CSS для этого конкретного идентификатора или класса, потому что, если у вас есть много этих компонентов (так много файлов этих партиалов), то порядок, в котором вы их импортируетев ваш глобальный styles.scss имеет значение, и файлы будут переопределять друг друга.В конце концов, это не должно быть проблемой, потому что мы всегда используем пользовательские классы для стилей.
ЗАКЛЮЧЕНИЕ
Я перепробовал много подходов, но только это сработало для меня, так как редактирование пользовательских MDB - **. Scss файлыочистит их при обновлении, как вы сказали.Но с этим подходом вы можете переопределить любой стиль любых компонентов MDB FREE / PRO, которые вы хотите.