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

The problem is caused by using the css files of Material 5/6 with Material 7. In my case the css files are imported in index.html from somewhere in /wwwroot/assets/. So upgrading through the cli or package.json was not enough.

In my case the solution was to get the css files of Material 7 from /node_modules/@angular/material/... and overwrite those existing in /wwwroot/assests/.. (these were the old Material 5 css files)

I updated angular material to 7.2.0 and I noticed the transparent mat-select-panel. Adding some css to my global styles/theme.scss fixed the issue.

You can add this css to your global root css file or add it to the component css file.

I keep all my angular material css in styles/theme.scss file then import it to the component.

Update: I added the prebuilt theme import to my styles/theme.scss file and that pulled in the missing mat-select-panel styles.

 @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);
}