官方自定義主題指南：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，它包含所有通用樣式，適用于多數(shù)組件，需要注意的是它只能在應(yīng)用中引入一次，多次引入可能導(dǎo)致項(xiàng)目奔潰
- 定義主題的數(shù)據(jù)結(jié)構(gòu)，作為主題的可用色板。它可以通過mat-light-theme或者 mat-dark-theme函數(shù)創(chuàng)建，輸出樣式傳遞到angular-material-theme mixin，使其對所有組件有效
主題文件不要引入到其他的scss文件中
自定義主題主要包含5中調(diào)色板：
- A primary palette: colors most widely used across all screens and components.常規(guī)狀態(tài)下的所有屏幕樣式與組件樣式
- An accent palette: colors used for the floating action button and interactive elements.鼠標(biāo)浮于上方或激活狀態(tài)
- A warn palette: colors used to convey error state.表示錯誤狀態(tài)
- 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文件即刻生效
語法實(shí)例：
node-sass src/unicorn-app-theme.scss dist/unicorn-app-theme.css
注意：
主題文件不可再引入到scss文件中，如果你想在其他scss文件中引入主題文件中定義的對象（如$candy-app-theme），你可以將自定義對象獨(dú)立出來見一個scss文件，然后將它們分別引入其他文件中，切不可將mat-core 與 angular-material-theme mixins重復(fù)引入scss文件中
如果想在組件中引入主題樣式，需要遵循view encapsulation中的組件樣式規(guī)范。
引入多個主題
#######樣例
@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中定義的主題
多個主題中衛(wèi)全局容器下的某個組件制定主題（如彈窗、首頁中包含的組件）
你可以通過OverlayContainer向組件中注入主題類：
import {OverlayContainer} from '@angular/material';
@NgModule({
// ...
})
export class UnicornCandyAppModule {
constructor(overlayContainer: OverlayContainer) {
overlayContainer.themeClass = 'unicorn-dark-theme';
}
}
OverlayContainer的themeClass可以在任何時候更改
為特定的組件定制主題
angular-material-theme mixin是為所有組件提供樣式支持，當(dāng)你想為特定組件定制樣式的時候，你可以：
@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
其他定制主題的內(nèi)容
按照指南操作過程中遇到的問題
將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
出現(xiàn)內(nèi)容
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的入?yún)?，必須?a target="_blank" rel="nofollow">Material Design spec中制定的調(diào)色板名
例如使用$mat-saphire 作為入?yún)崾揪幾g錯誤：Undefined variable
image.png -
處理了以上幾個問題，就可以成功編譯了
image.png
然后再index.html中引入css文件<link rel="stylesheet" href="src/assets/css/material-lake.css">
-
通過在styles.css文件中import的方式引入主題scss文件，會提示scss加了注釋導(dǎo)致項(xiàng)目編譯報錯
image.png 關(guān)于語法
theme.scss文件中$candy-app-primary、$candy-app-accent、$candy-app-warn可以隨意替換，但數(shù)量不能超過三個，依次對應(yīng)primary、accent、warn三種狀態(tài)，不填或者在組件中入?yún)⒌臅r候?qū)戝e，則取上一個樣式。關(guān)于多個主題的使用
可以通過組件父類的限制，拓展出多個（自定義）樣式（默認(rèn)是只有三種狀態(tài)的樣式）
項(xiàng)目地址：
https://github.com/LeventZheng/ngx-lake （主要關(guān)注如何自定義與整合，頁面沒來得及排版）
后續(xù)計(jì)劃：
結(jié)合 https://material.angular.io/components 與 http://demos.creative-tim.com/material-dashboard-pro/examples/components/buttons.html 整理一套angular material組件庫出來
