Angular Material 2：调整mat-button的CSS样式以匹配mat-button-toggle

我完全懂你的痛点——在工具栏里混放<mat-button-toggle>和普通的<mat-icon-button>时，样式不一致真的很影响视觉统一，尤其是像缩进这种只需要单次点击、不需要切换状态的操作，总不能硬套toggle组件对吧？下面给你几个实用的实现方法，亲测有效：

方案1：复用Angular Material内置样式类 #

Angular Material的mat-button-toggle组件本身有一套内置的样式类，我们可以直接把这些类加到mat-icon-button上，快速对齐样式：

<!-- 给普通图标按钮添加toggle组件的核心样式类 -->
<button mat-icon-button class="mat-button-toggle-button mat-button-toggle">
  <mat-icon>format_align_left</mat-icon>
</button>

再补充一点CSS细节，消除默认按钮的焦点高亮，和toggle组件保持一致：

/* 移除普通按钮的默认焦点背景，匹配toggle的无选中状态 */
.mat-icon-button.mat-button-toggle-button:focus:not(.mat-button-toggle-checked) {
  background-color: transparent;
}
/* 统一内边距，避免图标位置偏移 */
.mat-icon-button.mat-button-toggle-button {
  padding: 4px;
}

方案2：利用CSS变量统一样式（主题友好） #

如果你的项目用了Angular Material的主题系统，用CSS变量来继承mat-button-toggle的样式属性是更优雅的方式，能自动适配不同主题：

/* 自定义一个类，让图标按钮继承toggle的样式变量 */
.toolbar-action-button {
  /* 继承toggle的背景色、hover/点击状态色 */
  --mat-icon-button-background-color: var(--mat-button-toggle-button-background-color);
  --mat-icon-button-hover-background-color: var(--mat-button-toggle-button-hover-background-color);
  --mat-icon-button-pressed-background-color: var(--mat-button-toggle-button-pressed-background-color);
  
  /* 统一尺寸和内边距 */
  min-width: 40px;
  min-height: 40px;
  padding: 4px;
  border-radius: 4px;
}

然后在HTML中给按钮应用这个类：

<button mat-icon-button class="toolbar-action-button">
  <mat-icon>format_align_left</mat-icon>
</button>

方案3：手动复制toggle组件样式（兜底方案） #

如果上面两种方法还有细微差异，你可以直接通过浏览器开发者工具查看mat-button-toggle的完整样式，然后复制到mat-icon-button的自定义类中：

.as-toggle-button {
  /* 复制mat-button-toggle的基础布局样式 */
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 4px;
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  
  /* 匹配hover和点击状态 */
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.as-toggle-button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.as-toggle-button:active {
  background-color: rgba(0, 0, 0, 0.12);
}

HTML使用方式：

<button mat-icon-button class="as-toggle-button">
  <mat-icon>format_align_left</mat-icon>
</button>

小提示 #

测试时记得检查hover、active、focus这几个状态下的样式是否完全匹配，不同主题下可能需要微调颜色值，用开发者工具对比两个组件的样式属性就能快速定位差异。

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