Início / coding / Perguntas / 79410996
Accepted
ViktorE
Asked: 2025-02-04 16:17:31 +0800 CST

Material angular 19 - mat-typography não se aplica ao tema personalizado

  • 772

Configurei um novo projeto angular com angular 19 e me deparei com o problema mencionado no título. Adicionei material com o comando ng add cli e selecionei "sim" no prompt se eu quisesse usar tipografia. Isso funcionou até agora, meu elemento body agora tem a classe mat-typography.

Em seguida, configurei um tema personalizado de acordo com a documentação. Minha declaração de tema fica assim:

@use "@angular/material" as mat;

html {
    @include mat.theme(
        (
            color: (
                theme-type: light,
                primary: mat.$spring-green-palette,
            ),
            typography: Roboto,
            density: 0,
        )
    );
}

Também adicionei a fonte Roboto ao meu elemento, seguindo a documentação do material. Depois disso, os componentes do material tiveram a fonte e a tipografia corretas aplicadas, mas as tags html "simples" como <h1>, <p>e assim por diante não. Pesquisei os temas predefinidos para as regras que devem ser aplicadas e, se eu as copio para minha folha de estilo principal, elas funcionam bem, mas parece que o tema personalizado não as inclui, mesmo que a seção typograpy esteja definida na configuração do tema.

Capturas de tela mostrando a diferença entre os 2 casos:

tipografia não se aplica a h1 e p

tipografia aplicada corretamente

Alguém já passou por esse problema e, se sim, encontrou alguma solução?

css

1 respostas

  1. Best Answer

    Eu levantei um problema no github com minha análise. Por favor, acompanhe para entender a causa raiz:

    bug(Tematização): Ao criar um tema usando mat.theme( não há como configurar a tipografia como fizemos com mat.define-theme #30444

    Solução mais confiável:

    Até que isso seja corrigido, tente mat.define-themeconfigurar mat.typography-hierarchya tipografia para todos os elementos.

    @use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$spring-green-palette,
    ),
    typography: (
      plain-family: Roboto,
      brand-family: Open Sans,
      bold-weight: 900,
      medium-weight: 500,
      regular-weight: 300,
    ),
    density: (
      scale: 0,
    ),
  )
);
body {
  @include mat.core();
  @include mat.all-component-themes($theme);
}

@include mat.typography-hierarchy($theme);

html {
  height: 100%;
}

    Demonstração do Stackblitz

    Solução Hacky:

    Parece que esse método ( mat.theme() não tem uma configuração de tipografia (porque nenhum tema é retornado para armazenar em uma variável), você pode tentar este atalho, que está presente em um exemplo angular/material:

    @use '@angular/material' as mat;

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;

  @include mat.theme(
    (
      color: (
        theme-type: light,
        primary: mat.$spring-green-palette,
      ),
      typography: Roboto,
      density: 0,
    )
  );
}

html {
  height: 100%;
}

    Demonstração do Stackblitz

    • 1

relate perguntas