Description
mat.theme-overrides for typography are not being applied to mat-body-medium CSS class
Here are our overrides:
@use '@angular/material' as mat;
@include mat.theme-overrides(
(
body-medium: var(--mat-sys-body-medium-weight) 0.875rem / 1.375rem
var(--mat-sys-body-medium-font),
body-medium-line-height: 1.375rem,
body-small: var(--mat-sys-body-small-weight) 0.75rem / 1.125rem var(--mat-sys-body-small-font),
body-small-line-height: 1.125rem,
)
);
Related to #31176
Because body-medium and body-small line-heights are not accessible by default, we are using overrides to make them accessible, but these overrides are not being applied to mat-body-medium or mat-body-small CSS classes.
Reproduction
Steps to reproduce:
- Apply
theme-overrides to typography such as body-medium or body-small
- Apply a
mat-body-medium or mat-body-small CSS class to an element
- Notice how the override is not applied to the element
Expected Behavior
Overrides works for typography classes
Actual Behavior
Overrides do not work for typography classes
Environment
- Angular: v22
- CDK/Material: v22
- Browser(s): Any
- Operating System (e.g. Windows, macOS, Ubuntu): Any
Description
mat.theme-overridesfor typography are not being applied tomat-body-mediumCSS classHere are our overrides:
Related to #31176
Because body-medium and body-small line-heights are not accessible by default, we are using overrides to make them accessible, but these overrides are not being applied to
mat-body-mediumormat-body-smallCSS classes.Reproduction
Steps to reproduce:
theme-overridesto typography such asbody-mediumorbody-smallmat-body-mediumormat-body-smallCSS class to an elementExpected Behavior
Overrides works for typography classes
Actual Behavior
Overrides do not work for typography classes
Environment