Question

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

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

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

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

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

Answer 1

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

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

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

如果你有使用凉亭的角度材料，你可以编辑一个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 Design，它通过主题概念在Angular Material中实现了非常具体的颜色指南。要控制背景颜色，您可以使用CSS，还可以配置主题。本主题详细介绍了主题的使用：https://material.angularjs.org/latest/Theming/03_configuring_a_theme。

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

2 个答案: