Question

所以在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等？

Answer 1

我使用角度材料1，我不确定是否是相同的方式，但我所做的是使用指令：md-colors="::{background: 'themename-primary-100'}"当然在themename中你放了主题名称：P

Answer 2

官方的答案是目前无法做到这一点。大多数组件上可用的color属性仅接受调色板类型 - 即主要，重音或警告。

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

// custom-button-theme.scss
@import '~@angular/material/core/theming/all-theme';
@import '~@angular/material/button/_button-theme';

@mixin custom-button-theme($theme) {

  .mat-raised-button.a100, .mat-fab.a100, .mat-mini-fab.a100 {
    // _mat-button-theme-color is a mixin defined in _button-theme.scss
    // which applies the given property, in this case background-color
    // for each of the palettes - i.e. primary, accent and warn.
    // The last parameter is the hue colour to apply.
    @include _mat-button-theme-color($theme, 'background-color', 'A100');
  }

}

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

@import 'custom-button-theme.scss';
@include custom-button-theme($store-theme);

然后，您的按钮可以通过添加a100类来使用颜色。

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

然而，重要的是要注意内部API可以随时更改。此代码已使用版本2.0.0-beta.2进行了测试 - 无法保证它在测试版3出现时能够正常运行。

Answer 3

对我来说，我通过在组件scss中创建自定义mixin来解决此问题。在此mixin中，可以通过调用map-get方法使用原色。您需要在您的styles.scss中添加mixin（其中包括angular-material-theme），以完成这项工作。参见下面的示例。

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

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

最后将mixin包含在您的styles.scss中，以便将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);

如何从Primary Palette获得色调/浅色

3 个答案: