Angular Material 自定义组件主题

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

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

• 关于自定义组件的 Angular Material 文档并没有像 Florian 在他的问题中所说的那样告诉你整个故事。
• 我没有在在线讨论中找到包含所有必需文件和更改的示例，以便它可以工作。

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

• 这个展示了如何操作主题中的背景和前景元素。
• 这个展示了如何在自定义主题之间切换。

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

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

GitHub 上的这篇文章对我帮助最大。 这个讨论对于从 CSS 切换到 SCSS 也很有帮助。

对于任何有同样问题的人，我想分享我的解决方案，以便您在一个地方拥有一切：

1. 获取您的颜色定义

假设您想使用 #3F51B5 作为主要颜色，另一个作为强调色。转到此站点，输入每种颜色并下载定义（选择“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-file 重命名为 .scss 并对其进行编辑：

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

h1 { 
    color: $primary;
}

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

7. 更新example.component.ts文件中的样式 url ：

@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 文件。

更新：如果在创建组件时仍然没有创建 scss 文件，原因可能是您必须为所有项目配置 scss 扩展。有关更多信息，请参阅此讨论。什么帮助了我：ng config projects.<projectname>.schematics.@schematics/angular:component.style scss

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

我对 Angular 很陌生，可能有些事情你可以做得更好。所以任何人有进一步的建议，请告诉我。

Answer 2

我在这个堆栈溢出答案中描述了它。

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

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

• theme.scss

  • 应该不会在其他地方进口

  • 包括 Angular Material 核心和主题

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

要轻松地将 导入styles/_variables.scss到您的组件样式中，您必须添加stylePreprocessorOptions到angular.json文件中：

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

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

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