Angular Material 自定义组件主题

Question

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

例如，带有垫子工具栏的 div 和带边距的图标，应使用主要背景颜色进行填充。

有关主题的 Angular Material 指南说道:

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

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

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

主题再次导入到组件中，他们从 Material 主题中提取带有函数的颜色。

我很困惑，在没有颜色输入的非 Angular Material 组件或事件 Material 组件上使用颜色的正确方法是什么？

Answer 1

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

• The Angular Material documentation正如 Florian 在他的问题中所述，关于自定义自己的组件并不能告诉您整个故事。
• 我在在线讨论中没有找到包含所有所需文件和更改以使其正常工作的示例。

我在 Stackblitz 上发现了两个有用的示例:

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

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

• 我想使用自己的颜色。
• 我想在自己的组件中使用它们，例如 h1 或 div 等元素。
• 当然，我想避免样式重复，这是推荐的，但 Angular Material 主题文档中没有对此进行解释。

This post on GitHub对我帮助最大。 This discussion对于从 CSS 切换到 SCSS 也很有帮助。

对于遇到同样问题的任何人，我想分享我的解决方案，以便您可以在一个地方获得所有内容:

<强>1。获取您的颜色定义

假设您想使用 #3F51B5 作为主要颜色，并使用另一种作为强调色。前往this site ，输入每种颜色并下载定义(选择“Angular JS 2 (Material 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 文件重命名为 .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 扩展。请参阅this discussion了解更多信息。对我有什么帮助:ng config projects.<projectname>.schematics.@schematics/angular:component.style scss

<小时/>

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

我对 Angular 还很陌生，也许有些事情你可以做得更好。因此，如果有人有进一步的建议，请告诉我。