mat-select options became transparent after updating to angular material v7
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?
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)
- MatDatePicker start week on monday
- mat-select options became transparent after updating to angular material v7
- How can I customize date and time format in ngx-mat-datetime-picker?
- Why are Angular Material default styles loaded in such a way as to override custom themes?
- How to get the active tab In Angular Material2
- How to implement drag and drop in cypress test?
- Angular Material Tabs not working with wrapper component
- Angular 2 material mat-tab size
- How to do validation with mat-checkbox?
- How to include or exclude an attribute from the HTML in Angular 4
- Remove bottom border of tab group
- Angular 5 and material - How to change the background color from SnackBar component
- Angular Material Overriding Default Style of SnackBar Component
- Disable float for mdInput text field
- Apply a directive conditionally
- Declarative creation of an Overlay with ScrollStrategy
- SassError: Can't find stylesheet to import. @use '~@angular/material' as mat;
- Angular Material: mat-select not selecting default
- Select All mat option and deselect All
- angular 5 material - form fields stuck at 180px
- change angular material datePicker icon
- Angular Material - How to add a tooltip to a disabled button
- Angular Material and Jasmine : " No provider for InjectionToken MdDialogData! "
- How to hide/delete underline input Angular Material?
- MatPaginator gets undefined
- Autocomplete - select option programmatically
- How do I add a border on a Angular Material textarea field?
- How to change dir property of the Angular CDK overlay at runtime?
- Angular Material 2. Switch theme from light to dark on click
- Fetching an entire Country array from mat-country-select