how to override angular material mat-option style-CodePudding

The height doesn't get bigger and the inscription gets smeared and not pretty I have already tried many types of solutions but none of them worked I tried to do

::ng deep .mat-option{...}

But it didn't work I tried to do

::ng-deep cdk-global-overlay-wrapper{

But that didn't work either And I want to increase the height of mat-option and it doesn't work

CodePudding user response：

Try the below snippet:

mat-option {
  height: 200px !important;
}

Here instead of using the .mat-option class I am directly using the mat-option tag and applying the height using !important. With !important the style won't get applied.

CodePudding user response：

Assign a panel class for the mat-select, so that a custom class is available inside the overlay,

<mat-select panelClass="custom-select">
    <mat-option>option1</mat-option>
    <mat-option>option2</mat-option>
</mat-select>

then in the main styles file styles.css add css rules in the custom class to override the default styles

.mat-select-panel.custom-select .mat-option{
      height: 50px;
}