When I customize the theme to set a font...
<mat-card-title> <mat-card-action>
etc)<p> <span> <mat-card-content>
) and default to Roboto... Shouldn't those take the body-1 style? Note that I am using mat-card as an example, but the same happens with other components. https://material.angular.io/guide/typography Minimal steps to repro:
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-typography: mat.define-typography-config(
$font-family: "'Nerko One', cursive",
);
$theme: mat.define-light-theme(
(
color: (
primary: $theme-primary,
accent: $theme-accent,
),
typography: $my-typography,
)
);
@include mat.all-component-themes($theme);
Here is an example, you can see that the title etc are styled, but not the content of the card: https://stackblitz.com/edit/angular-wan6f9?file=src/app/card-actions-example.html
I tried a few approaches, including configuring each level which did not work. The only thing that works is to hardcode the default to the root of the document, which I would rather not do.
I had exactly the same symptoms and desperately added @include mat.all-component-typographies($typography);
in addition to the @include mat.all-component-themes($my-theme);
present in the documentation.
Where $typography
is basically the same as described by the OP.
Then all the styles kicked in as expected.
I had the same issue.
All I did to fix it was wrapping @include mat.all-component-themes($theme);
inside body {... }
, so the theme declaration looks like this:
body {
@include mat.all-component-themes($theme);
}
Looks like this mixin has to be a child of any element to work properly.
In my case I used the two "legacy" mixins to keep my "not-yet-migrated-to-MDC" code working as before:
mat.define-legacy-typography-config()
mat.all-legacy-component-themes($theme)
But this means you would need to keep using the now legacy components by importing them accordingly. These "legacy" imports should be automatically created with a migration when using ng update @angular/material@15
(see Angular update guide ) or when using nx migrate latest
in a Nx Workspace .
In material.module.ts
of your Stackblitz example :
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.