Angular Material 10 - 如何在我自己的风格中使用主色、强调色、警告色？

Question

我只需要使用标准（不是自定义）$primary、$accent、$want颜色来设计我的angular 组件。我在文档和文章中找到的只是如何自定义它。我不需要自定义，只需使用标准颜色即可。

例如，我只需要设置文字颜色：

    a {
      display: block;
      font-weight: bold;
      line-height: 2.3em;
      color: mat-color($accent);
    }

我该怎么做？我尝试的所有方法都会引发不同的错误。

Answer 1

更新：

在 Angular Material 中，默认主题已经编译到 css 中，因此无法访问任何涉及主题的 scss 变量。您必须创建一个自定义主题并从那里开始工作。此外，如果您最终创建了自己的主题，请务必更新 angular.json 以不再在样式

中导入默认主题

旧：

https://material.angular.io/guide/theming-your-components

这个 link 应该可以帮助您从 angular material 主题中导入 $primary/$accent scss 变量。 link 包含更多示例，但这一个对我最有帮助

你的组件css-file.scss:

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

.candy-carousel {
  // Get the default hue for a palette.
  color: mat-color($primary);

  // Get a specific hue for a palette. 
  // See https://material.io/archive/guidelines/style/color.html#color-color-palette for hues.
  background-color: mat-color($accent, 300);

  // Get a relative color for a hue ('lighter' or 'darker')
  outline-color: mat-color($accent, lighter);

  // Get a contrast color for a hue by adding `-contrast` to any other key.
  border-color: mat-color($primary, '100-contrast');
}

所以对于你的情况：

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

//...

a {
  display: block;
  font-weight: bold;
  line-height: 2.3em;
  color: mat-color($accent);
}

Answer 2

这对我有用。在 xxx-component.scss:

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

$app-primary: mat-palette($mat-deep-purple);
$app-accent: mat-palette($mat-amber, A200, A100, A400);
$theme: mat-light-theme((
  color: (
    primary: $app-primary,
    accent: $app-accent,
  )
));
$color: mat-get-color-config($theme);

$primary: map-get($color, primary);
$accent: map-get($color, accent);

.class1 {
  color: map-get($primary, 400);
}

.class2 {
  color: mat-color($accent, 100);
}

Angular Material 10 - 如何在我自己的风格中使用主色、强调色、警告色？

Angular Material 10 - how to use primary, accent, warn colors in my own styles?

styling

angular-material

angular