Angular material :如何使用主题的所有颜色

Question

我使用的是angular 7中的angular材质。

我以前在angular-1中使用过angular-material &它提供了一种方法(md- colors )来使用所有的颜色。

但是在angular-material-7中，我找不到这些属性。

当我们在像按钮这样的组件中使用颜色时

<button mat-raised-button color="primary">Primary</button>

在颜色方面，我们只能使用原色、重音和警告调色板。但是我想使用比这三种颜色更多的颜色。我想要一种方式来使用所有的材料主题颜色，就像我们在angular-material-1中使用的那样

谁能告诉我我错过了什么。所有颜色变量都存在于@angular/material/theming.scss中。但是我不知道如何使用这些颜色。

Answer 1

有同样的问题，到目前为止还不能为颜色属性使用不同于primary、accent和warn的值。然而，github上有一个与此相关的功能请求：Support additional colors outside primary, accent, warn

但是，您可以使用多个主题，并根据父类应用每个主题，如here所述。

或者，您可以将每个主题仅应用于here中描述的特定组件。

在这两种情况下，您都可以选择要为每个主题使用的调色板，也可以创建自己的自定义调色板。

另一种选择是使用CSS变量。你可以在styles.css上定义颜色，然后在你的css文件上使用：

/* styles.css */
:root {
  --color-1: #003422;
}

/* component.css */
button {
  background-color: var(--color-1);
}