MDB Angular Pro (пользовательский CSS) - PullRequest
0 голосов
/ 18 сентября 2018

Я новичок здесь.Я использую MDB Angular Pro (версия 6.2.2) и пытаюсь настроить их Date Picker и Time Picker для моего проекта.

Для тех, кто знает MDB Angular Pro, я не делаю никаких изменений в _custom-skin.scss, _custom-styles.scss и _custom-variables.scss в \ node_modules \ ng-uikit-pro-standard \ assets \ scss, так как они будут удалены во время "чистой установки maven".

Вместо этого я помещаю свои собственные коды в веб-приложение напрямую.Но ничто не помогает переопределить исходный CSS.

Я отчаянно пытался поместить коды либо в "styles.scss", "our_component.component.scss", либо в "app.component.scss",

Вы понимаете, как работает MDB Angular CSS?Как я должен сделать, чтобы настроить его правильно?

Ждем вашего ответа.Спасибо прежде.

С наилучшими пожеланиями

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Подход

Мой подход заключался в создании двух партиалов:
_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, которые вы хотите.

0 голосов
/ 18 сентября 2018

К сожалению, я не могу предложить НАМНОГО большего понимания, чем вы знаете.Например ... Я мог бы изменить отступ нижнего колонтитула календаря, обратившись к нему через

.picker__box .picker__footer {
    padding: 20px 10px !important;
}

и, таким образом, перегрузить стили CSS оригинального средства выбора даты.С помощью ...

.picker__box .picker__table .picker__day--selected, .picker__box .picker__table .picker__day--selected:hover, .picker__box .picker__table .picker--focused {
    background-color: pink
}

я изменил цвет фона выбранного дня на ... ну, розовый

enter image description here

...