How to customize cdk overlay pane?

Question

I am using mat-menu and mat-select in different components. The issue I am facing is that when we set

::ng-deep .cdk-overlay-container .cdk-overlay-pane {
}

in both the component's css file, it conflict each other (Which is expected). So is there a way to customize the overlay-pane in both components so that it doesn't affect the other component's style.

Answer 1

Menu component

From Angular Material v10, we can use MAT_MENU_DEFAULT_OPTIONS 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.

Use the following code at component or at module level:

providers: [
  {
    provide: MAT_MENU_DEFAULT_OPTIONS,
    useValue: { overlayPanelClass: 'menu-overlay-pane' }
  }
]

Stackblitz example: https://stackblitz.com/edit/angular-zmjhh6

Docs: https://material.angular.io/components/menu/api#MAT_MENU_DEFAULT_OPTIONS https://material.angular.io/components/menu/api#MatMenuDefaultOptions

Select component

From Angular Material v11, we can 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.

Use the following code at component or at module level:

providers: [
  {
    provide: MAT_SELECT_CONFIG,
    useValue: { overlayPanelClass: 'select-overlay-pane' }
  }
]

Stackblitz example: https://stackblitz.com/edit/angular-ig6y8v

Docs: https://material.angular.io/components/select/api#MAT_SELECT_CONFIG https://material.angular.io/components/select/api#MatSelectConfig

Autocomplete component

Use the following code at component or at module level:

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

providers: [
  {
    provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
    useValue: { overlayPanelClass: 'autcomplete-overlay-pane' }
  }
]