Angular Material 18+ 高级教程 – 大杂烩

前言

本篇记入一些 Angular Material 的小东西。

Override Material Icon Button Size

参考：Stack Overflow – Change size of mat-icon-button

想 override Material styles 有好几招可以用。

第一招是 override CSS variables，这是最安全有效的方式，但是 Angular Material 不一定有提供。

第二招就是 ::ng-deep 或者全局 styles.scss。

我们来看一个具体例子

<button class="close-btn" mat-icon-button aria-label="Close">
  <mat-icon class="icon" fontIcon="close" />
</button>

上面这是一个 icon button。

默认 size 是 48px。

我们拆开来一个一个看，

首先 button 是 48px 然后带 padding 12px

所以里面扣到来 icon 是 24px

除了 button size 是 CSS variable 其它都是属性值，那我们一次换到完呗。

.close-btn {
  --size: 256px;
  --mdc-icon-button-state-layer-size: var(--size);

  padding: calc(var(--size) / 4);

  .icon {
    font-size: calc(var(--size) / 2);
    width: calc(var(--size) / 2);
    height: calc(var(--size) / 2);
  }
}

效果

虽然看上去是 ok 了，但其实还有一个落网之鱼

这个 element 的 class 没有 _ngcontent-ng-xxxx 所以我们要用 ::ng-deep 才能修改它。

.close-btn {
  --size: 256px;

  ::ng-deep .mat-mdc-button-touch-target {
    width: var(--size);
    height: var(--size);
  }
}

搞定，最后封装起来。

.close-btn {
  @include set-mat-icon-button-size(256px);
}

@mixin set-mat-icon-button-size($size) {
  --size: $size;

  ::ng-deep .mat-mdc-button-touch-target {
    width: var(--size);
    height: var(--size);
  }

  --mdc-icon-button-state-layer-size: var(--size);

  padding: calc(var(--size) / 4);

  mat-icon {
    --icon-size: calc(var(--size) / 2);
    font-size: var(--icon-size);
    width: var(--icon-size);
    height: var(--icon-size);
  }
}

目录

想查看目录，请移步 Angular 18+ 高级教程 – 目录