为你自己的组件设置主题 Theming your own components

Theming your custom component with Angular Material's theming system

要想借助 Angular Material 来为你自己的组件添加样式，必须使用 Sass 来定义该组件的样式。

In order to style your own components with Angular Material's tooling, the component's styles must be defined with Sass.

1. Define all color and typography styles in a "theme file" for the component

首先，创建一个 Sass mixin，它接受一个 Angular Material 颜色配置，并为该组件输出一些特定颜色的样式。 颜色配置就是一个 Sass 中的 map 结构。

First, create a Sass mixin that accepts an Angular Material color configuration and outputs the color-specific styles for the component. A color configuration is a Sass map.

比如，如果要构建自定义的轮播（carousel）组件：

For example, if building a custom carousel component:

// Import library functions for theme creation.
@import '~@angular/material/theming';

@mixin candy-carousel-color($config-or-theme) {
    // Extract the color configuration in case a theme has been passed.
    // This allows consumers to either pass a theme object or a color configuration.
    $config: mat-get-color-config($config-or-theme);
    // Extract the palettes you need from the theme definition.
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);

  // Define any styles affected by the theme.
  .candy-carousel {
      // Use mat-color to extract individual colors from a palette.
      background-color: mat-color($primary);
      border-color: mat-color($accent, A400);
  }
}

第二步，创建另一个 Sass mixin，它的参数是 Angular Material 文字配置，输出是一些文字样式。比如：

Second, create another Sass mixin that accepts an Angular Material typography configuration and outputs typographic styles. For example:

@mixin candy-carousel-typography($config-or-theme) {
    // Extract the typography configuration in case a theme has been passed.
    $config: mat-get-typography-config($config-or-theme);

    .candy-carousel {
        font: {
            family: mat-font-family($config, body-1);
            size: mat-font-size($config, body-1);
      weight: mat-font-weight($config, body-1);
    }
  }
}

最后，创建一个以 Angular Material 主题为参数的 mixin，并根据配置将职责委托给各个独立主题体系的 mixins。主题由各个主题体系（ color 和 typography ）的配置组成。

Finally, create a mixin that accepts an Angular Material theme, and delegates to the individual theming system mixins based on the configurations. A theme consists of configurations for individual theming systems (color and typography).

@mixin candy-carousel-theme($theme) {
  // Extracts the color and typography configurations from the theme.
  $color: mat-get-color-config($theme);
  $typography: mat-get-typography-config($theme);

  // Do not generate styles if configurations for individual theming
  // systems have been explicitly set to `null`.
  @if $color != null {
    @include candy-carousel-color($color);
  }
    @if $typography != null {
        @include candy-carousel-typography($typography);
    }
}

参见文字风格指南以了解自定义字体的更多信息。

See the typography guide for more information on typographic customization.

2. Define all remaining styles in a normal component stylesheet.

在独立的文件中定义所有不受主题影响的样式，并在组件的 styleUrls 中直接引用它。

Define all styles unaffected by the theme in a separate file referenced directly in the component's styleUrl. This generally includes everything except for color and typography styles.

3. Include the theme mixin in your application

无论你是否已经包含了 Angular Material 内置的那些主题 mixin，都要使用 Sass 的 @include 关键字来包含组件的主题 mixin。

Use the Sass @include keyword to include a component's theme mixin wherever you're already including Angular Material's built-in theme mixins.

// Import library functions for theme creation.
@import '~@angular/material/theming';

// Include non-theme styles for core.
@include mat-core();

// Define your application's custom theme.
$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
  )
));

// Include theme styles for Angular Material components.
@include angular-material-theme($theme);

// Include theme styles for your custom components.
@include candy-carousel-theme($theme);

Note: using the mat-color function to extract colors from a palette

你可以使用来自 @angular/material/theming 的主题函数和 Material Design 调色板变量，还可以用 Sass 函数 mat-color 来把指定的颜色从调色板中提取出来。比如：

You can consume the theming functions and Material Design color palettes from @angular/material/theming. The mat-color Sass function extracts a specific color from a palette. For example:

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

.candy-carousel {
    // Get the default hue for a palette.
    color: mat-color($primary);

    // Get a specific hue for a palette. 
  // See https://material.io/archive/guidelines/style/color.html#color-color-palette for hues.
  background-color: mat-color($accent, 300);

  // Get a relative color for a hue ('lighter' or 'darker')
  outline-color: mat-color($accent, lighter);

  // Get a contrast color for a hue by adding `-contrast` to any other key.
  border-color: mat-color($primary, '100-contrast');
}
指南目录