Skip to content

bug(mat-typography): theme overrides are not being applied to typography CSS classes #33920

Description

@kainiedziela

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:

  1. Apply theme-overrides to typography such as body-medium or body-small
  2. Apply a mat-body-medium or mat-body-small CSS class to an element
  3. 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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: theminggemini-triagedLabel noting that an issue has been triaged by geminineeds triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions