如何在Angular TS应用的单个组件中使用Angular Materials且不影响全局样式

1. 用CSS类包裹Material主题，实现样式隔离 #

不要全局引入Angular Material的主题样式，而是创建一个自定义主题文件，将主题样式包裹在特定CSS类下，仅作用于需要Material的组件区域：

// src/styles/material-isolated-theme.scss
.material-container {
  @import '@angular/material/theming';
  
  // 自定义你的Material主题
  $primary-palette: mat-palette($mat-blue);
  $accent-palette: mat-palette($mat-orange, A200, A100, A400);
  $warn-palette: mat-palette($mat-red);
  
  $light-theme: mat-light-theme((
    color: (
      primary: $primary-palette,
      accent: $accent-palette,
      warn: $warn-palette,
    )
  ));
  
  @include angular-material-theme($light-theme);
}

之后在需要使用Material的页面组件的根元素上添加material-container类，Material的样式就只会影响这个类内部的元素。

2. 按需导入Material模块，避免全局污染 #

不在根模块（AppModule）中全局导入所有Material组件，而是创建一个专用的Material功能模块，只导入你需要的组件，再在目标页面的模块中引入这个专用模块：

// src/app/material-feature/material-feature.module.ts
import { NgModule } from '@angular/core';
// 仅导入当前需要的Material组件模块
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  exports: [
    MatButtonModule,
    MatInputModule
  ]
})
export class MaterialFeatureModule { }

// src/app/target-page/target-page.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TargetPageComponent } from './target-page.component';
import { MaterialFeatureModule } from '../material-feature/material-feature.module';

@NgModule({
  declarations: [TargetPageComponent],
  imports: [
    CommonModule,
    MaterialFeatureModule
  ]
})
export class TargetPageModule { }

3. 局部导入主题样式，限制作用范围 #

如果不需要在多个组件中复用Material主题，可以直接在目标组件的样式文件中导入主题，借助Angular的视图封装（默认的Emulated模式），样式只会作用于当前组件：

// src/app/target-page/target-page.component.scss
@import '../../styles/material-isolated-theme.scss';

4. 移除全局Material样式引用 #

检查angular.json的styles数组，确保没有添加@angular/material/prebuilt-themes/**/*.css这类全局样式文件，彻底切断Material样式对全局的影响。

内容的提问来源于stack exchange，提问作者Pwatson