I'm using Select component from Angular Material v19. I managed to override the style of some parts of the component using select-overrides mixin, but not completely.

Here is my scss:

  @include mat.select-overrides((
      panel-background-color: gray,
      enabled-trigger-text-color: white,
      enabled-arrow-color: white,
      focused-arrow-color: orange
  ));

I need to customize option bg-color on hover, option text color and bg-color on hover and text color for selected option. Is there any override mixin that I'm not aware of or I need to use workarounds.

Thank you in advance.

I'm using Select component from Angular Material v19. I managed to override the style of some parts of the component using select-overrides mixin, but not completely.

Here is my scss:

  @include mat.select-overrides((
      panel-background-color: gray,
      enabled-trigger-text-color: white,
      enabled-arrow-color: white,
      focused-arrow-color: orange
  ));

I need to customize option bg-color on hover, option text color and bg-color on hover and text color for selected option. Is there any override mixin that I'm not aware of or I need to use workarounds.

Thank you in advance.

• css
• angular
• typescript
• sass
• angular-material

1 Answer 1

The best way to customize is to use select-overrides, for those properties that cannot be customized, you just have to inspect element and identify the CSS variables that are used for color and them modify them manually. But it is important to note that the styles could break after material version update. In general angular material documentation discourages this approach.

body {
  ...
  @include mat.select-overrides(
    (
      panel-background-color: gray,
      enabled-trigger-text-color: white,
      enabled-arrow-color: white,
      focused-arrow-color: orange,
    )
  );
  --mat-option-focus-state-layer-color: darkred; // selected option background-color
  .mat-mdc-option.mdc-list-item.mat-mdc-option-active {
    --mat-option-label-text-color: lightyellow; // option selected color
  }
  --mat-option-hover-state-layer-color: red; // option hover color
  --mat-option-label-text-color: yellow; // option color
}

Full Code:

@use '@angular/material' as mat;

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

  @include mat.theme(
    (
      color: (
        theme-type: light,
        primary: mat.$azure-palette,
        tertiary: mat.$blue-palette,
      ),
      typography: Roboto,
      density: 0,
    )
  );

  @include mat.select-overrides(
    (
      panel-background-color: gray,
      enabled-trigger-text-color: white,
      enabled-arrow-color: white,
      focused-arrow-color: orange,
    )
  );
  --mat-option-focus-state-layer-color: darkred; // selected option background-color
  .mat-mdc-option.mdc-list-item.mat-mdc-option-active {
    --mat-option-label-text-color: lightyellow; // option selected color
  }
  --mat-option-hover-state-layer-color: red; // option hover color
  --mat-option-label-text-color: yellow; // option color
}

html {
  height: 100%;
}

Stackblitz Demo