Início / coding / Perguntas / 79552555
Accepted
Vladimir99
Asked: 2025-04-03 17:39:26 +0800 CST

Como substituir completamente os estilos do componente Select do Angular Material?

  • 772

Estou usando o componente Select do Angular Material v19. Consegui substituir o estilo de algumas partes do componente usando o mixin select-overrides , mas não completamente.

Aqui está meu scss:

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

Preciso personalizar a opção bg-color ao passar o mouse, a opção text color e bg-color ao passar o mouse e a text color para a opção selecionada. Existe alguma mixagem de substituição que eu não saiba ou preciso usar soluções alternativas.

Agradeço antecipadamente.

css

1 respostas

  1. Best Answer

    A melhor maneira de personalizar é usar select-overrides, para aquelas propriedades que não podem ser personalizadas, você só precisa inspecionar o elemento e identificar as variáveis ​​CSS que são usadas para cor e então modificá-las manualmente. Mas é importante notar que os estilos podem quebrar após a atualização da versão do material . Em geral, a documentação do material angular desencoraja essa abordagem.

    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
}

    Código completo:

    @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%;
}

    Demonstração do Stackblitz

    • 2

relate perguntas