装修组件

装修你的自定义组件

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

使用@mixinto automatically apply a theme

为什么使用@mixin

The advantage of using a@mixinfunction is that when you change your theme, every file that uses it will be updated automatically. Calling it with a different theme argument allow multiple themes within the app or component.

如何使用@mixin

We can better theming our custom components adding a@mixinfunction to its theme file and then calling this function to apply a theme.

All you need is to create a@mixinfunction in the custom-component-theme.scss

// Import all the tools needed to customize the theme and extract parts of it
@import '~@angular/material/theming';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin candy-carousel-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  // Use mat-color to extract individual colors from a palette as necessary.
  .candy-carousel {
    background-color: mat-color($primary);
    border-color: mat-color($accent, A400);
  }
}

Now you just have to call the@mixinfunction to apply the theme:

// Import a pre-built theme
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
// Import your custom input theme file so you can call the custom-input-theme function
@import 'app/candy-carousel/candy-carousel-theme.scss';

// Using the $theme variable from the pre-built theme you can call the theming function
@include candy-carousel-theme($theme);

For more details about the theming functions, see the comments in thesource.

使用@mixin最佳实践

When using@mixin, the theme file should only contain the definitions that are affected by the passed-in theme.

All styles that are not affected by the theme should be placed in acandy-carousel.scssfile. This file should contain everything that is not affected by the theme like sizes, transitions...

Styles that are affected by the theme should be placed in a separated theming file as_candy-carousel-theme.scssand the file should have a_before the name. This file should contain the@mixinfunction responsible for applying the theme to the component.

使用调色板颜色

You can consume the theming functions and Material palette variables from@angular/material/theming. You can use themat-colorfunction to extract a specific color from a palette. For example:

// Import theming functions
@import '~@angular/material/theming';
// Import your custom theme
@import 'src/unicorn-app-theme.scss';

// Use mat-color to extract individual colors from a palette as necessary.
.candy-carousel {
  background-color: mat-color($candy-app-primary);
  border-color: mat-color($candy-app-accent, A400);
}