首页 文章

角度材料定制组件主题

提问于
浏览 次
1

我正在尝试使用自定义颜色调色板中的颜色来定制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');
}

主题是在组件中再次导入，在其中使用材料主题中的函数提取颜色 .

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

angular sass angular-material

1 回答

  • 1

    我在this stack overflow answer中描述过它 .

    您应该将主题相关变量和主题创建放在 separate 文件中：

    • styles/_variables.scss

    • 可以在所有组件scss文件中导入

    • 使用 @import '~@angular/material/theming'; 来制作特定材料的混合物

    • 包含典型的主题变量，如 $primary ， $accent 和 $warn

    • 包含一个或多个 $theme 变量（例如，通过 mat-light-theme($primary, $accent, $warn); ）

    • theme.scss

    • 应该 not 在其他任何地方导入

    • 包括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);
}
    回复于

相关问题