Angular Material 自定义组件主题 [英] Angular Material Custom Component Theming

问题描述

我正在尝试在我的自定义 Angular Material 主题中将自定义调色板中的颜色用于其他一些组件.

I am trying to use colors from my custom color pallette in my custom Angular Material theme for some other components.

例如一个带有 mat-toolbar 的 div 和一个带有边距的图标，它应该用主要的背景色填充.

For example a div with a mat-toolbar and an icon with margin, which should be filled with primary background color.

关于主题的 Angular Material 指南说:

The Angular Material guides about theming says:

主题文件不应导入到其他 SCSS 文件中.这将导致重复的样式写入您的 CSS 输出.

The theme file should not be imported into other SCSS files. This will cause duplicate styles to be written into your CSS output.

但是在组件主题化指南中，它说明了以下内容:

But in the guide with component theming, it says the following:

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

You can consume the theming functions and Material palette variables from @angular/material/theming. You can use the mat-color function to extract a specific color from a palette. For example:

// 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');
}

主题再次导入组件中，在那里他们从材质主题中提取具有功能的颜色.

The theme is getting imported again in the component, where they extract the color with functions from the material theming.

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

I am confused, what is the right way, to use colors on non angular material components or event material components which have no color input?

推荐答案

我在 this stack overflow answer 中对此进行了描述.

I described it in this stack overflow answer.

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

You should put the theme related variables and the theme creation in separate files:

• styles/_variables.scss
  • 可以在所有组件scss文件中导入
  • 使用 @import '~@angular/material/theming'; 使材料特定的混合可用
  • 包含典型的主题变量，如 $primary、$accent 和 $warn
  • 包含一个或多个 $theme 变量(例如通过 mat-light-theme($primary, $accent, $warn);)
  • styles/_variables.scss
    • can be imported in all component scss files
    • uses @import '~@angular/material/theming'; to make material specific mixins available
    • contains typical theme variables like $primary, $accent and $warn
    • contains one or more $theme variables (e.g. via mat-light-theme($primary, $accent, $warn);)

    theme.scss

    • 不应导入到其他任何地方

    • 包括 Angular Material 核心和主题

    • should not be imported anywhere else

    • includes Angular Material core and theme

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

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

  To easily import the styles/_variables.scss into your component styles you have to add stylePreprocessorOptions to the angular.json file:

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

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

  Now you can import you custom variables and theme variables in your component and use also material specific mixins like mat-color:

  @import 'variables';
  
  $background: map-get($theme, background);
  
  .custom-class-a {
    background-color: mat-color($background, card);
    color: mat-color($mat-green, 700);
  }
  

  这篇关于Angular Material 自定义组件主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！