更新到 angular material v7 后，mat-select 选项变得透明

Question

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

material 更新中是否有某些更改使样式表现如此？

Answer 1

问题是由于 Material 5/6 的 css 文件与 Material 7 一起使用引起的。在我的例子中，css 文件是从 /wwwroot/assets/ 中的某处导入到 index.html 中的。所以通过 cli 或 package.json 升级是不够的。

在我的例子中，解决方案是从 /node_modules/@angular/material/... 中获取 Material 7 的 css 文件并覆盖那些存在于/wwwroot/assests/..（这些是旧的 Material 5 css 个文件）

Answer 2

我遇到了同样的问题。在我的例子中，我有一个从 @angular/material/theming 导入的自定义 SASS 文件，该应用程序依赖于 CSS 从这个生成的文件。

所以升级后我不得不重新生成 CSS 文件 node-sass 并且 mat-option-panel 不再透明了。

Answer 3

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

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

我将所有 angular 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);
}

Answer 4

对我来说，问题出在我 COPY/PASTING/MODIFYING 来自 github 网站的一些代码，以便开始我的样式设计方法。

/**
 *  The below is what's available in _theming.scss and what I based my code off of.
 * My issue (and I've highlighted the 2 lines, below) was that I had screwed w/ their 
 * comment and slammed the 2 lines together, screwing w/ the mixins in _theming.scss
 */
$mat-light-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
  disabled-list-option: map_get($mat-grey, 200),
);

我修改了：

  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,

收件人：

  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UXcard: white,

结果是 mat-select-panel 设置不正确（我想，也没有其他依赖 "card" 的东西）

更新到 angular material v7 后，mat-select 选项变得透明

mat-select options became transparent after updating to angular material v7

angular-material2