AngularCLI集成material design自定义主题

2017-06-14 本文已影响850人琢磨先生lf

官方自定义主题指南：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
出现内容

image.png
则说明安装成功
输入手动编译命令报错：node-sass src/assets/scss/material-lake.scss src/assets/css/material-lake.css
Error: File to import not found or unreadable: ~@angular/material/_theming.

image.png

解决办法是：改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

image.png
处理了以上几个问题，就可以成功编译了

image.png

然后再index.html中引入css文件<link rel="stylesheet" href="src/assets/css/material-lake.css">
通过在styles.css文件中import的方式引入主题scss文件，会提示scss加了注释导致项目编译报错

image.png
关于语法
theme.scss文件中$candy-app-primary、$candy-app-accent、$candy-app-warn可以随意替换，但数量不能超过三个，依次对应primary、accent、warn三种状态，不填或者在组件中入参的时候写错，则取上一个样式。
关于多个主题的使用
可以通过组件父类的限制，拓展出多个（自定义）样式（默认是只有三种状态的样式）