角材质自定义组件主题 [英] 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?

推荐答案

我在此堆栈溢出答案中对其进行了描述.

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';来提供材料特定的mixins
  • 包含典型的主题变量，例如$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"
    ]
  },
  

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

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

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