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

【问题标题】：Why does Angular Material set background colors?为什么 Angular Material 设置背景颜色？
【发布时间】：2016-05-18 09:14:39
【问题描述】：

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

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

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

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

谁能解释一下为什么 Google 会这样做？

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

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

这就是让网络如此神奇的原因，一切都是开源的，你可以随意破解它，直到它看起来完全符合你的要求。

但是你不必成为一个铁杆源代码挖掘者来改变你需要的东西，这就是为什么 Angular-material 库带有一个 .scss 文件（Sass mixin），它可以为你编译到 css 库中。

如果你有 angular-material with bower 有一个 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);
  }
}

【讨论】：

【解决方案2】：

答案是因为 Angular Material 是基于 Material Design 的，它通过主题概念在 Angular Material 中实现了非常具体的颜色指南。要控制背景颜色，您可以使用 CSS，也可以配置主题。本主题有关于主题使用的详细信息：https://material.angularjs.org/latest/Theming/03_configuring_a_theme。

【讨论】：