Angular 5中Material 2按钮旋转文本后悬停与波纹样式异常求助

我之前在Angular项目里折腾Material按钮旋转文本的时候，也踩过这个波纹和悬停范围不对的坑，给你分享几个亲测有效的hack方案，应该能解决你的问题：

方案1：重写波纹容器样式（最简单的hack） #

Material按钮的波纹和悬停状态是基于内部文本容器的尺寸计算的，我们可以直接强制修改这些容器的样式，让它们匹配外层按钮的大小：

首先在你的组件样式文件里添加以下代码（Angular 5中用::ng-deep穿透Material的样式隔离）：

/* 让内层文本容器占满整个按钮空间 */
::ng-deep .mat-button-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 强制波纹元素宽高和按钮一致 */
::ng-deep .mat-ripple-element {
  width: 100% !important;
  height: 100% !important;
}

/* 给按钮设置明确的宽高，适配旋转后的文本 */
.rotated-text-button {
  width: 40px;
  height: 120px;
  padding: 0;
}

/* 文本旋转样式 */
.button-text {
  transform: rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
}

然后在模板里给按钮加上对应的类：

<button mat-button class="rotated-text-button">
  <div class="button-text">你的按钮文本</div>
</button>

方案2：手动控制波纹触发（更稳定的hack） #

如果样式穿透的方式偶尔出现兼容性问题，我们可以用外层容器接管悬停状态，手动触发按钮的波纹效果：

模板代码： #

<div 
  class="button-container"
  (mouseenter)="triggerButtonRipple(true)"
  (mouseleave)="triggerButtonRipple(false)"
>
  <button mat-button #rotatedBtn class="rotated-text-button">
    <div class="button-text">你的按钮文本</div>
  </button>
</div>

组件TS代码： #

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

@Component({
  // 你的组件元数据
})
export class YourComponent {
  @ViewChild('rotatedBtn') rotatedButton!: ElementRef;

  triggerButtonRipple(isHovering: boolean) {
    const buttonInstance = this.rotatedButton.nativeElement;
    if (isHovering) {
      // 居中触发波纹
      buttonInstance._ripple.launch({ centered: true });
    } else {
      // 清除所有波纹
      buttonInstance._ripple.fadeOutAll();
    }
  }
}

样式代码： #

.button-container {
  width: 40px;
  height: 120px;
}

.rotated-text-button {
  width: 100%;
  height: 100%;
  padding: 0;
}

.button-text {
  transform: rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
}

方案3：自定义按钮+Material波纹指令（最彻底的方案） #

如果不想受Material按钮内置样式的限制，你可以完全自定义按钮结构，只引入Material的matRipple指令来实现波纹效果：

模板代码： #

<div 
  class="custom-rotated-button"
  matRipple
  [matRippleCentered]="true"
>
  <div class="button-text">你的按钮文本</div>
</div>

样式代码： #

.custom-rotated-button {
  width: 40px;
  height: 120px;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  /* 可选：添加Material按钮的阴影效果 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.custom-rotated-button:hover {
  background-color: #eeeeee;
}

.button-text {
  transform: rotate(90deg);
  white-space: nowrap;
}

这个方案完全由你控制按钮的所有样式，波纹会自动适配外层容器的大小，不会出现原问题中的适配偏差。

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