Angular 如何从主调色板获取色调/较浅颜色

在Angular Material 2中，我设置了我的主题

$store-primary: mat-palette($mat-storecast);
$store-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$store-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$store-theme: mat-light-theme($store-primary, $store-accent, $store-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($store-theme);

我无法从他们的文档中了解到的是如何从主调色板（即工具栏上的按钮）获取不同的色调颜色

<button md-mini-fab (click)="zoomIn()" color="primary">
     <md-icon>add</md-icon>
</button>

添加

---

它似乎只理解color=primary或color=accent等。如何指定我要使用primary-100或primary-500等？

我使用角度材质1，我不确定是否是相同的方式，但我所做的是使用指令：

md colors=“：{background:'themename-primary-100'}”

当然，在

主题名中

你把主题名改为：P

官方的答案是，这目前是不可能的。大多数组件上可用的

color

属性仅接受调色板类型，即主选项、重音或警告

如果您真的想这样做，非正式的答案是，如果您不介意滥用内部API，那么（在组件对组件的基础上）这是可能的。例如，要获得按钮上的A100颜色，可以将自定义混音添加到主题中

//custom-button-theme.scss
@导入“~@angular/material/core/theming/all-theme”；
@导入“~@angular/material/button/_button-theme”；
@混入自定义按钮主题（$theme）{
.mat-raised-button.a100、.mat-fab.a100、.mat-mini-fab.a100{
//_mat-button-theme-color是在_button-theme.scss中定义的混音
//它应用给定的属性，在本例中为背景色
//对于每个选项板-即主选项板、重音选项板和警告选项板。
//最后一个参数是要应用的色调颜色。
@包括_mat-button-theme-color（$theme，'背景色'，'A100'）；
}
}

然后在主主题文件中导入自定义mixin

@import'自定义按钮主题.scss'；
@包括自定义按钮主题（$store主题）；

然后，您的按钮可以通过添加

a100

类来使用颜色

添加

---

但是需要注意的是，内部API可以随时更改。这段代码是用版本2.0.0-beta.2测试的-不能保证它在beta 3发布时能正常工作。

对于我来说，我通过在组件SCS中创建自定义混音来修复这一问题。在这个mixin中，您可以通过调用map get方法来使用原色。您需要在styles.scs（其中包括angular material主题）中包含mixin，才能实现此功能。见下面的例子

从组件SCS创建自定义混合：

@import '~@angular/material/theming';

@mixin custom-component($theme) {
  $primary: map-get($theme, primary);

  mat-toolbar{
    &.p100{
      background-color: mat-color($primary, 100);
    }
  }
}

为模板中的工具栏指定类“p100”：

<mat-toolbar class="p100"></mat-toolbar>

最后，在styles.scs中包含mixin，以便将mixin包含在主题中：

@import 'PATH_TO_YOUR_COMPONENT/custom-component.scss'; <--------- import the custom mixin

$store-primary: mat-palette($mat-storecast);
$store-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$store-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$store-theme: mat-light-theme($store-primary, $store-accent, $store-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 custom-component($store-theme); <--------- Include it before you include angular-material-theme
@include angular-material-theme($store-theme);

---

@import'PATH_TO_YOUR_COMPONENT/custom COMPONENT.scss'；我试着像color=“primary-100”一样，但由于某种原因，它变成了重音主题。非常奇怪您需要定义主题，在angular 1中是这样做的：
mdThemingProvider.theme（'themename'）。primaryPalette（'blue-grey'）。accentPalette（'lime'）。WarnPlate（'red'）$mdThemingProvider.setDefaultTheme（'themename'）
然后使用
md colors=“：：{background:'themename-primary-100'}”
如果答案正确，请将答案标记为正确，以便我在答案字段中对其进行编辑以使其更具可读性。@LuizRossi这不正确。他特别询问了angular2和material2。好的，谢谢伊恩，我想这将在不久的将来添加。