angular - 仅将 Angular Material 主题应用于特定组件

Question

是否可以将 angular material 内置主题仅应用于特定组件？

我做了:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

在我的 component.scss 文件之一中，并将其作为 component.ts 文件中的 styleUrl 引用。但是这些样式不适用于我的 angular material paginator。

这是分页器的样子



如图所示，样式不适用。

这是否与我将它们导入到组件特定的 scss 文件中而不是在 angular.json 中导入的事实有关？

Answer 1

您必须使用 Mixins @angular/material 提供的而不是使用预构建的主题。

@import '~@angular/material/theming';
@include mat-core();

// Use the desired palette
$palette:  mat-palette($mat-indigo);
// Create the theme
$theme: mat-light-theme($palette, $palette);

// Include component specific mixin
@include mat-dialog-theme($theme);

// Or wrap inside another selector to scope the styles to only one specific component
my-component {
   @include mat-dialog-theme($theme);
}

编辑:这段代码应该在你的styles.scss中(全局的，而不是特定于组件的scss)