MDB Angular Pro（自定义CSS）

Question

我是新来的。我正在使用MDB Angular Pro（6.2.2版），并尝试为我的项目自定义其日期选择器和时间选择器。

对于那些了解MDB Angular Pro的人，我不会对\ node_modules \ ng-uikit-pro-standard \ assets中的_custom-skin.scss，_custom-styles.scss和_custom-variables.scss进行任何更改。 \ scss，因为它们将在“ maven全新安装”过程中被删除。

相反，我将自定义的代码直接放在Web应用程序中。但是没有任何方法可以覆盖原始CSS。

我拼命尝试将代码放在“ styles.scss”，“ our_component.component.scss”或“ app.component.scss”中，

您了解MDB Angular CSS如何工作吗？我应该如何正确自定义它？

期待您的回答。谢谢你。

最诚挚的问候

Answer 1

遗憾的是，我无法提供比您所知道的更多的见解。例如...我可以通过以下方式访问压光机脚注的填充

.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
}

我将所选日期的背景色更改为...好吧，粉红色

Answer 2

方法

我的方法是创建两个部分：
_mdb-date-picker.scss
_mdb-time-picker.scss

然后，我在这些文件中编写了自定义CSS，并将其导入到 app GLOBAL styles.scss 文件中。

---

示例

在此示例中，我为日期选择器动态分配了一个类（婚礼选择器或baptism选择器或wedbapt-picker ），并且每个CSS都有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;
  }

然后将它们导入到您的应用程序的globalsstyle.scss

@import "app/your/route/to/partial/mdb-date-picker"

单击链接以查看最终结果：Custom Date picker

---

警告

请记住，使用这种方法，您需要确保已为日期选择器或时间选择器分配了ID或类，并为该特定ID或类编写了CSS，因为如果您拥有足够多的这些组件（那么多的部分文件），然后将它们导入到全局样式中的顺序就很重要。scss很重要，并且文件将相互覆盖。最后，这应该不成问题，因为无论如何我们总是将自定义类用于样式。

---

结论

我尝试了很多方法，但是只有这种方法对我有用，因为编辑MDB custom-**。scss文件会在您按您说的那样更新时清除它们。但是，通过这种方法，您可以覆盖所需的任何样式的任何MDB FREE / PRO组件。