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

I just started using Angular Material (I am used to Bootstrap) and am noticing some strange things. I am using the library for the md-datepicker, however, when I placed it on my page I noticed they were setting a background color to the picker:

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

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

But my background for my site is a blue color, so there is just a white box floating on top of the datepicker and it looks terrible. Why would they even set this value in the first place? Why not leave it transparent so it can be used with any site and any background color?

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

This just seems to make my life harder because now I have to go override those styles in my CSS.

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

Can someone please explain why Google would do this?

有人可以解释为什么谷歌会这样做？

2 个解决方案

#1

Writing a library that appeases every conceivable design requirement I believe is a very tall order.

写一个能满足每个可以设想的设计要求的库，我相信这是一个非常高的订单。

That is what makes the web so amazing, everything is open-source and you can hack it as much as you like, until it looks exactly the way you want it.

这就是网络如此惊人，一切都是开源的，你可以随心所欲地破解它，直到它看起来完全符合你的需要。

But you don't have to be a hardcore source code digger to change what you need, that is why the Angular-material library comes with a .scss file (Sass mixin) that compiles into the css libraries for you.

但是你不必是一个硬核源代码挖掘器来改变你需要的东西，这就是Angular-material库附带一个.scss文件（Sass mixin）为你编译成css库的原因。

If you got angular-material with bower there is a angular-material.scss file which you can edit and then can re-compile, the line number you looking for is around 2615:

如果你有凉亭的角度材料，你可以编辑一个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

The answer to why is because Angular Material is based on Material Design which has very specific color guidelines implemented in Angular Material via the concept of themes. To control your background color you can use CSS and you can also configure your theme. This topic has details on the use of themes: https://material.angularjs.org/latest/Theming/03_configuring_a_theme.

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

#1