add custom class to cdk-overlay-pane in mat-select limitation is angular material 10.2.7

Question

I tried below code but it works for angular material 11 but my limitation is I need to use only angular material 10

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

I have many mat-select in other components, but I need to add custom class to only one specific component mat-select.

I was able to add custom class for specific component which contains mat-select as below but overlayDir is deprecated.

@ViewChild(MySelect) select: MySelect;

ngAfterViewInit() {
  this.select.overlayDir.panelClass = 'customClass';
}

is there any way to add custom class for cdk-overlay-pane?

Answer 1

Really I don't know if can help, but a mat-select has a property: panelClass you can use

<mat-select ... panelClass="customClass" >
</mat-select>

This add a class not to the "cdk-overlay-container" else to the "mat-select-panel".