How to customize or apply another class with ".cdk-overlay-pane" for angular material mat-select | mat-dialog

Question

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.

Answer 1

You should use MAT_SELECT_CONFIG injection token. It has an option overlayPanelClass: string | string[] 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 :

Answer 2

@andreivictor's answer didn't work for me. Because I'm using select inside the autocomplete. If you are using autocomplete you have to do like this;

import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';

--

..
  providers: [
    {
      provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
      useValue: { overlayPanelClass: 'customClass' }
    }
  ],
..