仅将角形材质主题应用于特定组件

Question

是否可以仅将角形材质内置主题应用于特定组件？

我做到了：

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

在我的component.scss文件之一中，并将其作为component.ts文件内的styleUrl引用。但是这些样式不适用于我的棱角分明式分页器。

这是分页器的样子

如图所示，样式不适用。

这与我将它们导入特定于组件的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）

Answer 2

使每个组件独立于angular中默认主题的最佳方法是使每个组件的import语句不同

通常，对于整个应用程序都具有默认主题，我们可以使用该导入 （例如@import '@angular/material/prebuilt-themes/purple-green.css';） 在主CSS文件中，该文件为 style.css

之后，对于每个组件，我们都可以根据需要使用其他主题。

ex：对于名为homepage的组件，我们可以向文件添加其他主题 homepage.component.css

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

，对于其他组件（例如登录），我们在页面 login.component.css

中添加一个不同的主题

@import '@angular/material/prebuilt-themes/pink-bluegrey.css';

这解决了我的问题。