Início / coding / Perguntas / 79339969
Accepted
Jihed Ben Zarb
Asked: 2025-01-09 00:09:43 +0800 CST

Estilo Angular Material datepicker

  • 772

Estou tentando estilizar meu seletor de datas do Angular Material. No entanto, não funcionou usando muitas abordagens diferentes (estou usando o Angular 17 e o Angular Material 17.3.10). Vi muitas perguntas aqui sendo respondidas usando ::ng-deep, mas ele está obsoleto agora, então usar isso não funciona:

:host ::ng-deep .mat-calendar {
  display: block;
  background-color: #b91212;
  color: var(--mat-datepicker-calendar-container-text-color);
  box-shadow: var(--mat-datepicker-calendar-container-elevation-shadow);
  border-radius: var(--mat-datepicker-calendar-container-shape);
}

Também, tentei usar o panelClass, mas também não funcionou. Uma coisa para mencionar também é que no Angular material Docs, o estilo é fornecido apenas para v19. Vocês podem me ajudar? Ficarei grato :)

angular

1 respostas

  1. Best Answer

    Não é recomendado mirar nos elementos internos dos componentes do Angular Material, veja seus documentos de tema . Em vez disso, você deve definir valores para suas variáveis ​​CSS.

    Material Angular v19+

    Angular Material v19 adicionou uma overridesAPI SCSS para cada componente, o que permite a personalização da aparência. Por exemplo, para substituir os estilos do datepicker, use o seguinte código SCSS:

    @use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.datepicker-overrides((
    calendar-container-background-color: #b91212,
    // add more overrides here if needed ...
  ));
}

    Você pode verificar a documentação do datepicker para todos os valores possíveis que você pode substituir.

    Material Angular v17 / v18

    Caso você esteja usando uma versão anterior onde essa API ainda não está disponível, a melhor solução é fornecer valores diretamente para suas variáveis ​​CSS:

    // Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  --mat-datepicker-calendar-container-background-color: #b91212;
  // add more variables here if needed ...
}

    Assim que você atualizar seu aplicativo para o Angular v19 ou posterior, você deve refatorar o código e usar os overridesmixins, pois somente eles são oficialmente suportados.

    • 1

relate perguntas