Question

我正在为应用定义主题，定义颜色和版式。但这不适用于基于mat-toolbar的应用程序标头组件中的标题。默认情况下，.mat-toolbar h1的主题CSS规则将覆盖我的主题。

index.html

    <html>
    ...
     <body class="mat-typography">
            <app-root></app-root>
        </body>
    </html>

_theme.scss文件：

    @import '~@angular/material/theming';
    @import 'utils/palette';
    // Plus imports for other components in your app.

    // Define the palettes for your theme using the Material Design palettes available in palette.scss
    // (imported above). For each palette, you can optionally specify a default, lighter, and darker
    // hue. Available color palettes: https://material.io/design/color/
    $fem-theme-primary: mat-palette($fem-palette-primary);
    $fem-theme-accent: mat-palette(
        $fem-palette-primary
    ); // NOT USED, same as $fem-theme-primary!
    $fem-theme-warn: mat-palette($fem-palette-warn);

    // Create the theme object (a Sass map containing all of the palettes).
    $fem-theme: mat-light-theme(
        $fem-theme-primary,
        $fem-theme-accent,
        $fem-theme-warn
    );

    // Include theme styles for core and each component used in your app.
    // Alternatively, you can import and @include the theme mixins for each component
    // that you are using.
    @include angular-material-theme($fem-theme);

    // Define a custom typography config that overrides the font-family as well as the
    // `headlines` and `body-1` levels.
    $fem-typography: mat-typography-config(
        $font-family: $font-family,
        $headline: mat-typography-level(32px, 48px, 700),
    );

    @include angular-material-typography($fem-typography);

    // Include the common styles for Angular Material. We include this here so that you only
    // have to load a single css file for Angular Material in your app.
    // Be sure that you only ever include this mixin once!
    @include mat-core($fem-typography);

topbar.component.html

    <div class="topbar">
        <mat-toolbar>
            <h1 class="topbar__logo mat-headline">App Title</h1>
            <mat-form-field
                class="topbar__search"
                appearance="outline"
                color="primary"
            >
                <input
                    matInput
                    data-e2e="topbar-search-input"
                    class="topbar__search-field"
                    placeholder="Søg"
                    (input)="handleSearchChange($event)"
                />
                <mat-icon matSuffix inline="true">search</mat-icon>
            </mat-form-field>

            <div>
                <span class="topbar__current-user">{{ currentUser.name }}</span>
                <a
                    mat-button
                    class="topbar__log-out"
                    href=""
                    data-e2e="btn-logout"
                    (click)="logout()"
                    >Log ud</a
                >
            </div>
        </mat-toolbar>
    </div>

字体家族正在工作……但我希望<h1 class="topbar__logo mat-headline">App Title</h1>拥有CSS：

    font-size: 32px;
    line-height: 48px;
    font-weight: 700;

它具有默认样式： CSS：

    font-size: 20px;
    line-height: 32px;
    font-weight: 500;

如何使所有Angular Material组件（包括mat-toolbar）使用自己的主题？

Answer 1

组件mat-toolbar故意将所有标题标签（从h1到h6）覆盖为“ title”字体，后者映射到h2。您可以使用以下命令使它显示h1的“常规”字体：

@import '~@angular/material/theming';

.mat-toolbar h1 {
   @include mat-typography-level-to-styles($fem-typography, headline); // where headline maps to h1
}

如果您希望将以上内容应用于其他标题尺寸，则这里是所有映射：

标题：h1
标题：h2
subheading-2：h3
subheading-1：h4
标题：h5

垫工具栏上的自定义主题排版

1 个答案: