Skip to content

fix(material/toolbar): reset heading typography styles inside toolbar#33319

Open
EduardF1 wants to merge 1 commit into
angular:mainfrom
EduardF1:fix/mat-toolbar-heading-typography-specificity
Open

fix(material/toolbar): reset heading typography styles inside toolbar#33319
EduardF1 wants to merge 1 commit into
angular:mainfrom
EduardF1:fix/mat-toolbar-heading-typography-specificity

Conversation

@EduardF1
Copy link
Copy Markdown

Fixes #26261

Summary

  • heading elements inside mat-toolbar could inherit .mat-typography font sizes and margins instead of the toolbar typography
  • .mat-toolbar h1 and .mat-typography h1 had the same specificity, so the result depended on CSS load order
  • this updates the toolbar styles to use a higher-specificity selector for h1-h6, resetting margin to

Heading elements (h1-h6) placed inside mat-toolbar were inheriting
mat-typography margins and font sizes, which overrode the toolbar's
intended styles.

Add CSS rules to reset margin to 0 and inherit the toolbar font for
heading elements, ensuring consistent appearance.

Fixes angular#26261

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@pullapprove pullapprove Bot requested review from adolgachev and crisbeto May 30, 2026 00:07
@google-cla
Copy link
Copy Markdown

google-cla Bot commented May 30, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug(mat-toolbar): mat-toolbar styles for elements like h1, h2, ... are not taking precedence over mat-typography

1 participant