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
::ng-deep
because of that: angular.io/guide/component-styles#deprecated-deep--and-ng-deep – Marcin Kapusta