如何将自定义材质主题包含到组件中而不重复mixins：mat-core和angular-material-theme

2 回答

• 1

  我遇到了同样的问题，一些讨论可以找到here，以及一个处理问题here的精辟博客 .

  重点是 - 正如主题指南正确陈述的那样 - 你不应该在整个项目中多次导入mixins @include mat-core() 和 @include angular-material-theme($your-theme) . 但是当你想要将整个主题导入SASS组件时，不小心会复制材料混合 .

  我认为最终的解决方案是主题指南所描述的解决方案

  主题对象的定义应该分解为自己的文件，与mat-core和angular-material-theme mixins的包含分开

  但是，由于我最初不清楚如何做到这一点，所以对于任何坚持相同的人来说，这是一步一步：

  • 创建一个包含SASS部分的 assets/styles/partials 文件夹

  我的文件夹看起来像这样：

  assets/styles/partials/
    _palette.scss     // custom material palettes
    _scaffolding.scss // general mixins
    _theme.scss       // <-- our theme definition
    _variables.scss   // global variables like fonts and colors
  

  _theme partial包含以下内容：

  // assets/styles/partials/_theme.scss
  @import '~@angular/material/theming';
  @import 'variables';
  @import 'scaffolding';
  @import 'palette';
  
  $my-primary: mat-palette($mat-primary);
  $my-accent: mat-palette($mat-accent);
  $my-warn: mat-palette($mat-warn);
  
  $my-theme: mat-light-theme($my-primary, $my-accent);
  

  而已 . 请勿在此文件中包含材料mixins mat-core 和 angular-material-theme .

  • 创建一个全局主题文件 assets/styles/my-theme.scss . 它只包含三行：

  // assets/styles/my-theme.scss
  @import 'partials/theme';                    // our actual theme definition
  @include mat-core();                         // the required mat-core mixin
  @include angular-material-theme($my-theme);  // the declaration of our custom material theme
  

  通过这样做，我们分离了我们的主题部分，包括我们的所有客户调色板，脚手架和变量，从包含mat-core和我们的自定义材料主题的文件 .

  • 在Angular.json中，将my-theme文件声明为样式下的全局

  "styles": [ "src/assets/styles/my-theme.scss" ]
  

  有了这个，我们的应用程序始终使用我们的自定义材质主题，但由于主题定义（在 theme 部分中）与包含材质mixin（在 my-theme 中）是分开的，我们可以安全地将我们的 theme partial包含到任何组件中，而无需复制任何CSS .

  （可选）您可以通过将部分路径添加到Angular.json中的stylePreprocessorOptions来简化主题部分的导入：

  "build": {
    (...)
    "options": {
      (...)
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/assets/styles/partials"
        ]
      }
    }
  }
  

  只需 @import 'theme' 在任何组件scss文件中，我们可以访问所有变量和材料主题功能，如mat-color :)

  回复于 2024-04-30T16:50:55+08:00
• 2

  你现在应该这样做：

  @import '~@angular/material/theming';
  @include mat-core();
  
  $candy-app-primary: mat-palette($mat-indigo);
  $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
  $candy-app-warn:    mat-palette($mat-red);
  
  $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
  
  @include angular-material-theme($candy-app-theme);
  

  但你应该以此为目标：

  // First file variables.scss
  @import '~@angular/material/theming';
  @include mat-core();
  
  $candy-app-primary: mat-palette($mat-indigo);
  $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
  $candy-app-warn:    mat-palette($mat-red);
  

  // Second file
  @import 'src/variables';
  
  $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
  @include angular-material-theme($candy-app-theme);
  

  这就是我理解它的方式 .

  回复于 2024-04-30T16:50:55+08:00