时间戳

首页 > 解决方案 > mat-toolbar 中的自定义主题排版

css - mat-toolbar 中的自定义主题排版

问题描述

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

索引.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）使用我自己的主题？

标签： cssangularangular-materialangular-material-7

解决方案

组件 mat-toolbar 故意将所有标题标签（h1 到 h6）覆盖为映射到 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
  • 副标题 2：h3
  • 副标题 1：h4
  • 标题：h5

推荐阅读