为什么 Angular Material 设置背景颜色？

Question

我刚开始使用 Angular Material（我已经习惯了 Bootstrap）并且注意到了一些奇怪的事情。我正在为 md-datepicker 使用该库，但是，当我将它放在我的页面上时，我注意到他们正在为选择器设置背景颜色：

md-datepicker.md-default-theme, md-datepicker {
    background: rgb(255,255,255);
}

但是我网站的背景是蓝色的，所以只有一个白色的框漂浮在日期选择器的顶部，看起来很糟糕。他们为什么要首先设置这个值？为什么不让它保持透明以便它可以用于任何网站和任何背景颜色？

这似乎让我的生活更加艰难，因为现在我必须在我的 CSS 中覆盖这些样式。

有人可以解释一下为什么 Google 会这样做吗？

Answer 1

我认为编写一个满足所有可能的设计要求的库是一项非常艰巨的任务。

这就是网络如此神奇的原因，一切都是开源的，您可以随心所欲地修改它，直到它看起来完全符合您的要求。

但是您不必成为核心源代码挖掘者就可以更改您需要的内容，这就是 Angular-material 库带有 .scss 的原因文件（Sass mixin）为您编译成 css 库。

如果你用 bower 得到 angular-material 有一个 angular-material.scss 文件你可以编辑然后重新编译，行号你要找的是2615左右：

// Floating pane that contains the calendar at the bottom of the input.
.md-datepicker-calendar-pane {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $z-index-menu;

  border-width: 1px;
  border-style: solid;
  background: transparent;

  transform: scale(0);
  transform-origin: 0 0;
  transition: transform $md-datepicker-open-animation-duration $swift-ease-out-timing-function;

  &.md-pane-open {
    transform: scale(1);
  }
}

Answer 2

原因的答案是因为 Angular Material 基于 Material 设计，该设计通过主题概念在 Angular Material 中实施了非常具体的颜色指南。要控制您的背景颜色，您可以使用 CSS，您还可以配置您的主题。本主题详细介绍了主题的使用：https://material.angularjs.org/latest/Theming/03_configuring_a_theme.

为什么 Angular Material 设置背景颜色？

Why does Angular Material set background colors?

angularjs

angular-material