AngularCLI集成material design自定义主题与总结

官方自定义主题指南： theming guide

一、官方指南说明：

典型样例：在src目录下新建material-design.scss 

@import '~@angular/material/theming';
// Plus imports for other components in your app.
// 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();
// 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.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-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($candy-app-theme);

然后在angular-cli.json，styles配置增加刚刚的文件即可使用


自定义主题主要需要做两件事：


  • 引入mat-core() sass mixin，它包含所有通用样式，适用于多数组件，需要注意的是它只能在应用中引入一次，多次引入可能导致项目奔溃
    • 

  • 定义主题的数据结构，作为主题的可用色板。它可以通过mat-light-theme或者 mat-dark-theme函数创建，输出样式传递到angular-material-theme mixin，使其对所有组件有效
    
主题文件不要引入到其他的scss文件中
    • 

    自定义主题主要包含5中调色板：
    

  • A primary palette: colors most widely used across all screens and components.常规状态下的所有屏幕样式与组件样式
    • 

  • An accent palette: colors used for the floating action button and interactive elements.鼠标浮于上方或激活状态
    • 

  • A warn palette: colors used to convey error state.表示错误状态
    • 

  • A foreground palette: colors for text and icons.字体与按钮
    • 

  • A background palette: colors used for element backgrounds.元素背景
    • 

  • 如果使用Angular CLI，它支持自动便宜scss文件，所以只需要在angular-cli.json文件的styles列表中引入scss文件即可
    • 

  • 使用node-sass编译scss成css文件，然后index.html文件中引入css文件即刻生效
    
语法实例：
    • 

    node-sass src/unicorn-app-theme.scss dist/unicorn-app-theme.css

    主题文件不可再引入到scss文件中，如果你想在其他scss文件中引入主题文件中定义的对象（如$candy-app-theme），你可以将自定义对象独立出来见一个scss文件，然后将它们分别引入其他文件中，切不可将mat-core 与 angular-material-theme mixins重复引入scss文件中
    
如果想在组件中引入主题样式，需要遵循view encapsulation中的组件样式规范。
    

    引入多个主题
    

    #######样例
    

    @import '~@angular/material/theming';
// Plus imports for other components in your app.
// 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();
// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
// Include the default theme styles.
@include angular-material-theme($candy-app-theme);
// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
对于父组件中包含unicorn-dark-theme类名的，将使用$dark-theme中定义的主题
    

    多个主题中卫全局容器下的某个组件制定主题（如弹窗、首页中包含的组件）
    

    你可以通过OverlayContainer向组件中注入主题类：
    

    import {OverlayContainer} from '@angular/material';
@NgModule({
  // ...
export class UnicornCandyAppModule {
  constructor(overlayContainer: OverlayContainer) {
    overlayContainer.themeClass = 'unicorn-dark-theme';

    OverlayContainer的themeClass可以在任何时候更改
    

    为特定的组件定制主题
    

    angular-material-theme mixin是为所有组件提供样式支持，当你想为特定组件定制样式的时候，你可以：
    

    @import '~@angular/material/theming';
// Plus imports for other components in your app.
// 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();
// Define the theme.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
// Include the theme styles for only specified components.
@include mat-core-theme($candy-app-theme);
@include mat-button-theme($candy-app-theme);
@include mat-checkbox-theme($candy-app-theme);

    还是需要include mat-core-theme mixin
    

    其他定制主题的内容
    

    theming-your-components.md
    

    按照指南操作过程中遇到的问题
    

  • 将scss文件引入angular-cli.json，不生效（不是路径问题）,改用node-sass编译
    • 

    安装node-sass的过程
    
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
    
cnpm i node-sass
    
cnpm i -g node-sass
    
安装成功后在cmd 输入 node-sass -v
    

    解决办法是：改import的路径，将@import ~@angular/material/theming';改成@import '../../../node_modules/@angular/material/theming';（最好去检查下node_modules/@angular/material目录是否有_theming.scss文件），import的theming带不带下划线都不影响
    

    mat-palette的入参，必须是Material Design spec中制定的调色板名
    
例如使用$mat-saphire  作为入参会提示编译错误：Undefined variable
    
theme.scss文件中$candy-app-primary、$candy-app-accent、$candy-app-warn可以随意替换，但数量不能超过三个，依次对应primary、accent、warn三种状态，不填或者在组件中入参的时候写错，则取上一个样式。
    

  • 关于多个主题的使用
    
可以通过组件父类的限制，拓展出多个（自定义）样式（默认是只有三种状态的样式）
    •