How to style mat-select's panel component. From the docs I get that I need to provide panelClass so I make it like this:
<mat-form-field>
<mat-select placeholder="Search for"
[(ngModel)]="searchClassVal"
panelClass="my-select-panel-class"
(change)="onSearchClassSelect($event)">
<mat-option *ngFor="let class of searchClasses" [value]="class.value">{{class.name}}</mat-option>
</mat-select>
</mat-form-field>
I inspected in developer tools that this class is attached to the panel in DOM and it is attached. So I have my custom scss class attached to this element. Now when I provide css it just don't work. My scss for example looks like this:
.my-select-panel-class {
width:20px;
max-width:20px;
background-color: red;
font-size: 10px;
}
The width of the panel is always equal to the width
of the select element. Sometimes In options You have too long strings and I would like to make it a little bit wider. Is there any way how to do this. My style from my component just not working even background-color
is not working. Does somebody knows why this behaves so strange?
I'm using:
Angular 4.4.5
@angular/material: 2.0.0-beta.12
Best Answer
For Angular9+, according to this, you can use:
Demo
Angular Material uses
mat-select-content
as class name for the select list content. For its styling I would suggest four options.1. Use ::ng-deep:
CSS:
DEMO
2. Use ViewEncapsulation
None value is what you will need to break the encapsulation and set material style from your component. So can set on the component's selector:
Typscript:
CSS
DEMO
3. Set class style in style.css
This time you have to 'force' styles with
!important
too.style.css
DEMO
4. Use inline style
DEMO