From 9ad657b808d6b794810a4bc5d647ae3412587b77 Mon Sep 17 00:00:00 2001 From: Eduard Fischer-Szava Date: Sat, 30 May 2026 02:07:13 +0200 Subject: [PATCH] fix(material/toolbar): reset heading typography styles inside toolbar 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 #26261 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/material/toolbar/toolbar.scss | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/material/toolbar/toolbar.scss b/src/material/toolbar/toolbar.scss index b1adb154c406..cfe3cd8b210e 100644 --- a/src/material/toolbar/toolbar.scss +++ b/src/material/toolbar/toolbar.scss @@ -14,14 +14,20 @@ $height-mobile-portrait: 56px !default; .mat-toolbar { background: token-utils.slot(toolbar-container-background-color, $fallbacks); color: token-utils.slot(toolbar-container-text-color, $fallbacks); - - &, h1, h2, h3, h4, h5, h6 { - font-family: token-utils.slot(toolbar-title-text-font, $fallbacks); - font-size: token-utils.slot(toolbar-title-text-size, $fallbacks); - line-height: token-utils.slot(toolbar-title-text-line-height, $fallbacks); - font-weight: token-utils.slot(toolbar-title-text-weight, $fallbacks); - letter-spacing: token-utils.slot(toolbar-title-text-tracking, $fallbacks); - margin: 0; + font-family: token-utils.slot(toolbar-title-text-font, $fallbacks); + font-size: token-utils.slot(toolbar-title-text-size, $fallbacks); + line-height: token-utils.slot(toolbar-title-text-line-height, $fallbacks); + font-weight: token-utils.slot(toolbar-title-text-weight, $fallbacks); + letter-spacing: token-utils.slot(toolbar-title-text-tracking, $fallbacks); + + // Use doubled class selector (specificity 0-2-1) to ensure heading styles + // take precedence over .mat-typography heading styles (specificity 0-1-1). + &.mat-toolbar { + h1, h2, h3, h4, h5, h6 { + font: inherit; + letter-spacing: inherit; + margin: 0; + } } @include cdk.high-contrast {