Question

我有一个名为stupid-theme.scss的主题文件，其中包含以下内容：

@import '~@angular/material/core/theming/all-theme';
@include mat-core();

/*https://material.io/guidelines/style/color.html#color-color-palette*/

$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-teal , 700, A100, A400);

$theme: mat-light-theme($primary, $accent);
@include angular-material-theme($theme);

一切都很棒。

我如何在下面定义工具栏：

<md-toolbar color="primary"></md-toolbar>
<md-toolbar color="wowee"></md-toolbar>

我希望这个课程是另一种不同的mat-indigo，例如500。：

  $wowee: mat-palette($mat-indigo,100);


$mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: #3f51b5,   
  600: #3949ab,
  700: #303f9f,
  800: #283593,
  900: #1a237e,
  A100: #8c9eff,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: white,
    400: white,
    500: $white-87-opacity,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: $white-87-opacity,
  )
);

如何谈到angular2;我该怎么做？

Answer 1

颜色属性只能是：＆＃39; primary＆＃39;，＆＃39;警告＆＃39;或者＆＃39;重音＆＃39;。

您可以做的是为每个组件制作不同的主题...... （Theming only certain components）示例：

＆＃13;

@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);

＆＃13;

另一件事是使用css（将css放在你的全局css文件中）：

＆＃13;

.mat-toolbar.mat-primary {
    background: your color;
}

＆＃13;

angular2材料和主题...如何添加不同的主要阴影

1 个答案: