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

【问题标题】：How to remove ripple effect from mat-stepper如何从 mat-stepper 中消除涟漪效应
【发布时间】：2021-03-18 12:26:42
【问题描述】：

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;
    }

【问题讨论】：

标签： css angular onfocus mat-stepper ripple-effect

【解决方案1】：

根据the API，步进器组件有一个disableRipple 属性可用。

修改official stackblitz example进行演示。

【讨论】：

【解决方案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;
}

【讨论】：

这将有助于在悬停或聚焦时更改背景颜色
如果您编辑此答案以解释为什么它是正确的以及为什么它是该问题的最佳答案，那么这个答案会更有帮助，以便其他人可以从您的知识中学习。