css - 如何从 mat-stepper 中消除涟漪效应

Question

tihs 是当您将鼠标悬停在 matstepper 上时的效果无法弄清楚如何禁用此效果 想要从 mat-stepper 中删除涟漪效果或焦点效果或可滚动效果请帮助我在这里
我已经尝试了所有无法计算的方法它像涟漪效应透明和焦点指示器

.stepper-qre {
        background: #F5F6F7;
        height: 88%;
    }
    
    .mat-horizontal-stepper-header-container {
        width: 65% !important;
        margin-left: 16.5%;
        /* display: -webkit-box !important; */
    }
    
    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
        padding: 24px 0px !important;
    }
    
    ::ng-deep.mat-stepper-label-position-bottom.mat-stepper-horizontal-line {
        top: 34px !important;
    }
    
    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label {
        position: fixed;
        margin-top: 1%;
    }
    
    .stepper-qre.mat-step-icon-selected {
        background-color: #2699FB !important;
        color: white !important;
    }
    
    .stepper-qre.mat-step-icon-state-done {
        background-color: #2699FB !important;
        color: #fff !important;
    }
    
    .stepper-qre.mat-step-header .mat-step-icon {
        background-color: #C4C6CC !important;
        color: #fff;
    }
    
    ::ng-deep.mat-step-icon {
        height: 20px !important;
        width: 20px !important;
    }
    
    .mat-step-icon.mat-step-icon-state-notcompleted {
        background-color: #C4C6CC !important;
    }
    
    #activebutton:focus {
        border: none !important;
        outline: none !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    ::ng-deep.mat-step-header.mat-step-header-ripple {
        background-color: transparent !important;
    }
    
    .mat-ripple-element {
        transition-duration: 0ms !important;
    }

Answer 1

根据 APIdisableRipple，步进器组件有一个可用的属性。

修改了官方的 stackblitz 示例进行演示。

Answer 2

.mat-step-header:hover{
    background-color: white !important;
}
.mat-step-header.cdk-program-focused {
      background-color: white;
  }
.mat-step-header.cdk-mouse-focused{
    background-color: white;
}
.mat-step-header.cdk-focused{
    background-color: white;
}