【问题标题】：MDB Angular Pro (custom CSS)MDB Angular Pro（自定义 CSS）
【发布时间】：2018-09-18 14:00:40
【问题描述】：

我是新来的。我正在使用 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 clean install”期间被删除。

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

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

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

期待您的回答。之前谢谢。

最好的问候

【问题讨论】：

实际上，在你的 css 语句后面使用 !important 应该可以。这就是我不断对项目进行更改的方式
我做到了，它适用于某些人，但不适用于其他人。
您有时必须弄清楚哪个元素实际上实现了 CSS 属性。我经常遇到这些问题。例如，工具提示指令。它的 z-index 错误，甚至位于我的页脚和页眉上方。转到您的全局 styles.scss 并 - 遗憾的是 - 通过使用 chrome 或 firefox 等浏览器的检查功能来尝试适合您的。
是的，我也尝试过。我将新代码放在“styles.scss”、“our_component.component.scss”或“app.component.scss”中。但遗憾的是它仍然不起作用。
这很奇怪。那么，不同的方法，你如何从日期选择器中复制 css 方法，并在你的全局 scss 上使用 !important 标志？

标签： css angular customization

【解决方案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
}

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

【讨论】：

【解决方案2】：

接近

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

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

示例

在这个例子中，我为日期选择器动态分配了一个类（wedding-picker OR baptism-picker OR 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;
  }

然后将它们导入到您的应用全局样式.scss

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

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

警告

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

结论

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

【讨论】：