how to override angular material mat-option style

Question

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

It is difficult to understand without more context. Please supply more relevant code (html, css). — Joosep Parts, Oct 02 '22 at 15:11

score 1 · Answer 1 · answered Oct 02 '22 at 17:59

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

1 Answers1