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:
Alguém já passou por esse problema e, se sim, encontrou alguma solução?