如何设置Angular Material组件的自定义默认值？能否修改@angular/material组件的属性自定义值？

我来一步步帮你解决你遇到的这三个问题：

一、为Angular Material组件设置自定义默认值 #

很多Angular Material组件都支持通过全局注入配置令牌来设置默认值，这样不用在每个组件实例上重复配置。以你用到的mat-paginator为例，你可以在根模块（比如AppModule）中注入MAT_PAGINATOR_DEFAULT_OPTIONS来统一设置默认参数：

import { NgModule } from '@angular/core';
import { MAT_PAGINATOR_DEFAULT_OPTIONS } from '@angular/material/paginator';

@NgModule({
  providers: [
    {
      provide: MAT_PAGINATOR_DEFAULT_OPTIONS,
      useValue: {
        pageSize: 10, // 默认每页条数
        pageSizeOptions: [5, 10, 20], // 可选每页条数
        showFirstLastButtons: true // 默认显示首尾按钮
      }
    }
  ]
})
export class AppModule { }

其他组件比如mat-datepicker、mat-select也有类似的全局配置令牌，你可以查看对应组件的官方文档找到对应的配置项。

二、为@angular/material的属性定义自定义值 #

这得分两种情况来看：

• 组件输入属性的自定义值：如果组件的输入属性支持自定义（比如mat-button的color属性默认只有primary/accent/warn，但你可以通过自定义主题扩展颜色；或者mat-card的role属性），直接在模板中传入自定义值即可。比如：

  <mat-button color="custom-blue">自定义颜色按钮</mat-button>
  

  不过这类自定义需要配合主题配置生效，比如扩展Angular Material的调色板：

  $custom-blue: mat.define-palette(mat.$blue-palette, 700);
  $theme: mat.define-light-theme((
    color: (
      primary: $custom-blue,
    )
  ));
  

• 主题系统的自定义属性：如果是想修改主题中的间距、圆角、字体等全局属性，可以通过自定义mat-core的混合参数来覆盖，比如：

  @include mat.core((
    density: 0,
    typography: $custom-typography,
    border-radius: 8px
  ));
  

三、修改.mat-paginator-range-label的margin为auto可行吗？ #

完全可行！你修改失败大概率是因为Angular的视图封装机制导致你的样式无法穿透到组件内部。可以用以下几种方法解决：

方法1：使用::ng-deep穿透样式（推荐在组件内使用） #

在组件的.component.scss文件中添加：

::ng-deep .mat-paginator-range-label {
  margin: auto !important; // 加!important确保优先级足够
}

注意：::ng-deep虽然在Angular 12+中被标记为deprecated，但目前仍然是最便捷的组件内穿透方式，替代方案是使用全局样式或关闭视图封装。

方法2：在全局样式文件中修改 #

在项目根目录的styles.scss（或styles.css）中添加：

.mat-paginator-range-label {
  margin: auto !important;
}

这种方法不需要穿透，但会影响项目中所有的mat-paginator组件。

方法3：关闭组件的视图封装 #

在组件类中设置ViewEncapsulation.None：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent { }

然后在组件的样式中直接写：

.mat-paginator-range-label {
  margin: auto;
}

这种方法会让组件的样式全局生效，需要注意避免样式冲突。

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