Question

我正在尝试使用自定义颜色调色板中的颜色来定制Angular Material主题中的其他组件。

例如，带有mat-toolbar和带边距的图标的div，应填充主背景颜色。

关于主题的Angular Material指南说：

不应将主题文件导入其他SCSS文件。这将导致重复样式写入CSS输出。

但是在有组件主题的指南中，它说明了以下内容：

您可以使用@ angular / material / theming中的主题函数和材质调色板变量。您可以使用mat-color函数从调色板中提取特定颜色。例如：

// Import theming functions
@import '~@angular/material/theming';
// Import your custom theme
@import 'src/unicorn-app-theme.scss';

// Use mat-color to extract individual colors from a palette as necessary.
// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
// For example a hue of "darker-contrast" gives a light color to contrast with a "darker" hue.
// Note that quotes are needed when using a numeric hue with the "-contrast" modifier.
// Available color palettes: https://www.google.com/design/spec/style/color.html
.candy-carousel {
  background-color: mat-color($candy-app-primary);
  border-color: mat-color($candy-app-accent, A400);
  color: mat-color($candy-app-primary, '100-contrast');
}

主题再次在组件中导入，在那里他们使用材料主题中的函数提取颜色。

我很困惑，在非角度材料组件或没有颜色输入的事件材料组件上使用颜色的方法是什么？

Answer 1

我在this stack overflow answer中进行了描述。

您应将与主题相关的变量和主题创建放在分开的文件中：

styles/_variables.scss
- 可以导入所有组件scss文件中
- 使用@import '~@angular/material/theming';来提供特定于材料的mixin
- 包含典型的主题变量，例如$primary，$accent和$warn
- 包含一个或多个$theme变量（例如，通过mat-light-theme($primary, $accent, $warn);）

theme.scss

不应不导入其他任何地方

包括Angular Material核心和主题

@import 'variables';
@include mat-core();
@include angular-material-theme($theme);

要将styles/_variables.scss轻松导入到组件样式中，必须add stylePreprocessorOptions to the angular.json file：

"styles": [
  "src/styles.scss",
  "src/theme.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
},

现在，您可以在组件中导入自定义变量和主题变量，还可以使用特定于材质的混合，例如mat-color：

@import 'variables';

$background: map-get($theme, background);

.custom-class-a {
  background-color: mat-color($background, card);
  color: mat-color($mat-green, 700);
}

Answer 2

回答这个问题太晚了，但是我遇到了同样的问题，花了很多时间试图弄清楚它是如何工作的。主要问题是：

The Angular Material documentation关于自定义组件的信息并不能像Florian在他的问题中所说的那样讲述整个故事。
我没有在网上讨论中找到带有 all 所需文件和更改以使其能够正常工作的示例。

我在Stackblitz上找到了两个有用的示例：

This one显示了如何操作主题中的背景和前景元素。
This one显示了如何在自定义主题之间切换。

但是，我需要一些不同的东西：

我想使用自己的颜色。
我想在 h1或div 等元素的单独组件中使用它们。
我当然想避免样式重复，这是推荐的做法，但在《 Angular Material》主题文档中未作解释。

This post on GitHub对我的帮助最大。 This discussion在从CSS切换到SCSS方面也很有帮助。

对于有相同问题的任何人，我想分享我的解决方案，以便一劳永逸：

1。获取您的颜色定义

假设您要使用＃3F51B5作为主要颜色，而另一个使用作为强调颜色。转到this site，输入每种颜色并下载定义（选择“ Angular JS 2（材料2）”，然后复制$md-mcgpalette0: (___)的内容。

2。创建theme_variables.scss并将其放在您的src目录中。

插入您刚刚下载的颜色定义。

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

$app-blue: (
    50 : #e8eaf6,
    100 : #c5cbe9,
    200 : #9fa8da,
    300 : #7985cb,
    400 : #5c6bc0,
    500 : #3f51b5,
    600 : #394aae,
    700 : #3140a5,
    800 : #29379d,
    900 : #1b278d,
    A100 : #c6cbff,
    A200 : #939dff,
    A400 : #606eff,
    A700 : #4757ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )

$app-yellow: ( 
    // repeat for your second color
)

$app-primary: mat-palette($app-blue, 500);
$app-accent: mat-palette($app-yellow, 500);

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

// Custom Sass colors vars (will be available in all the project)
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);
$warn: mat-color($app-warn);

您还可以将调色板与变量定义分离成两个不同的文件，但我还是这样保留了它。

3。创建theme.scss并将其放在您的src目录中：

@import "~@angular/material/theming";
@import "./theme_variables.scss";
@import "./fonts/fonts.css"; // in case you have this file for your fonts

@include mat-core();

$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

@include angular-material-theme($app-theme);

4。创建styles.scss并将其放在您的src目录中：

@import "./theme.scss";

// add the rest of your global styles

5。更新angular.json：

... "styles": [
          "src/styles.scss",
          "src/theme.scss"
        ] ...

6。在您要使用主题颜色的组件中，将example.component.css文件重命名为.scss并进行编辑：

@import "../../theme_variables.scss";

h1 { 
    color: $primary;
}

h2 { 
    color: $accent;
}
// put the rest of your styling

7。更新您的example.component.ts文件中的样式网址：

@Component({
  selector: "example",
  templateUrl: "./example.component.html",
  styleUrls: ["./example.component.scss"] // <-- update the file type
})

8。按默认切换到scss

运行ng config schematics.@schematics/angular:component.styleext scss为将来的新组件创建scss文件。

如果不需要所有组件中的变量，则可以保留它们的css文件。每当您要在组件中使用主题颜色时，请将css文件更改为scss，导入主题变量并更新组件中的styleUrl（步骤6 + 7）。

我对Angular并不陌生，可能有些事情您可以做得更好。因此，如果还有其他建议，请告诉我。

角度材料自定义组件主题

2 个答案: