如何移除Angular Material中mat-select组件的点击缩放效果

安全阿岳

2026-9-27

禁用Angular Material mat-select选项高亮缩放动效方案

你提到的选中条目轻微缩放效果来自Angular Material为`mat-option`默认添加的状态样式，直接通过CSS覆盖默认规则即可移除，不需要修改`cdk-overlay`相关属性，具体实现如下：

方案1：全局生效（适配项目所有mat-select组件）

在项目全局样式文件（通常为styles.css/styles.scss）中添加以下CSS规则：

/* 移除mat-option选中、hover、聚焦状态的缩放动效 */
.mat-option.mat-active,
.mat-option:hover:not(.mat-option-disabled),
.mat-option:focus:not(.mat-option-disabled) {
  transform: scale(1) !important;
  transition: none !important;
}

/* 若需要同时移除下拉面板弹出时的缩放过渡动效，添加以下规则 */
.mat-select-panel {
  transform: scale(1) !important;
  transition: none !important;
}

方案2：单组件生效（仅作用于当前组件的mat-select）

如果不需要全局修改，仅要修改单个组件内的mat-select效果，按两步操作：

在当前组件的样式文件中添加上述CSS规则
在组件的@Component配置中关闭视图封装，让组件样式可以覆盖Material默认样式，TS代码参考：

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

@Component({
  selector: 'app-your-custom-select',
  templateUrl: './your-custom-select.component.html',
  styleUrls: ['./your-custom-select.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourCustomSelectComponent {
  // 组件业务逻辑
}