I am using mat-select to display a list of options. So, when you click on the mat-select input filed, it shows a list of options using div with cdk-overlay-pane class. I want to customize cdk-overlay-pane class. Using ::ng-deep I did this like,
::ng-deep {
.cdk-overlay-pane {
transform: translateX(-40px) translateY(-13px) !important;
}
}
& it works also, but it is affecting another cdk-overlay-pane.
Is there any way to give customClass to that div with cdk-overlay-pane ?
<div id="cdk-overlay-1" class="cdk-overlay-pane customClass" style="transform: translateX(-40px) translateY(-51px);">
so that only this div will be customized & it will not affect other divs.
You should use MAT_SELECT_CONFIG injection token . It has an option overlayPanelClass: string | string[], which represents:
the class or list of classes to be applied to the menu's overlay panel.
Shortly, use the following code at component or at module level:
providers: [
{
provide: MAT_SELECT_CONFIG,
useValue: { overlayPanelClass: 'customClass' }
}
],
Demo: https://stackblitz.com/edit/angular-hxgonn
The overlayPanelClass option is available from Angular Material v11.
MAT_SELECT_CONFIG is docummented here.
MatSelectConfig is docummented here: