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

Question

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

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

    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

此链接应该可以帮助您从 Angular Material 主题导入 $primary/$accent scss 变量。该链接包含更多示例，但这一个对我最有帮助

你的组件scss-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);
}