angular-material2 - 更新到角度 Material v7 后，mat-select 选项变得透明

Question

过去几周我一直在开发一个网络应用程序，我们想进行一些更新。我们更新了项目及其所有节点模块，当我让一切再次正常工作时，选择下拉菜单的选项是透明的，并且 mat-cards 失去了阴影。

Material 更新中是否发生了一些变化，使样式表现得像这样？

Answer 1

我将 angular material 更新为 7.2.0，我注意到透明的 mat-select-panel .添加一些 CSS 到我的全局 styles/theme.scss解决了这个问题。

您可以将此 css 添加到全局根 css 文件或将其添加到组件 css 文件。

我将所有有角度的 Material css 保存在 styles/theme.scss 中文件，然后将其导入组件。

更新:我将预构建的主题导入添加到我的 styles/theme.scss 文件中，并引入了缺少的 mat-select-panel 样式。

 @import '~@angular/material/prebuilt-themes/indigo-pink.css';

.mat-select-panel {
  background: #fff;
}

.mat-select-panel:not([class*=mat-elevation-z]) {
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}