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

Question

I have been working on a web app for the past few weeks and we wanted to make some updates. We updated the project and all of its node modules and when I got everything working again the select drop down's options were transparent and the mat-cards lost their drop shadow.

Did something change in the material update that made the styles act like this?

Answer 1

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