设置角度 mat-slide-toggle 的焦点状态答案

【问题标题】：style the focus state of an angular mat-slide-toggle设置角度 mat-slide-toggle 的焦点状态
【发布时间】：2020-01-12 15:51:16
【问题描述】：

我使用什么类来设置 mat-slide-toggle 的焦点状态？

据我通过浏览器中的 Inspect 得知，它可能类似于 ::ng-deep .mat-ripple-element .mat-slide-toggle-persistent-ripple，但这不起作用。我尝试了ripple 的几种变体，但我似乎找不到合适的变体，即使我的方向正确。

我想要的是重新着色并缩小下面粉红色圆圈的直径，我只是不知道如何为 SASS 选择它。

HTML：

<mat-slide-toggle (change)="onChange($event)">{{ variable-here }}</mat-slide-toggle>

【问题讨论】：

标签： angular sass

【解决方案1】：

我假设你的组件是一个封装的组件...

$primary-color: #2eb66fl
:host{
/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
  background-color: rgba($primary-color, 0.54);
}
/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
 background: $primary-color;
}

以下代码用于设置波纹样式。

/deep/ .mat-slide-toggle.mat-checked .mat-ripple-element {
    background-color: $primary-color;
    }    
   }

【讨论】：

【解决方案2】：

你试过了吗

mat-slide-toggle:focus

【讨论】：

只是试了一下，没有骰子，不幸的是

【解决方案3】：

您需要将 ::ng-deep 伪类添加到父级 mat-slide-toggle 元素。我发现使用 ::ng-deep 在 Angular Material 中定位阴影 DOM 元素最好通过定位在模板中声明的元素来完成。（例如，包装器或父元素）

例如在这种情况下：

mat-slide-toggle.mat-slide-toggle.mat-checked::ng-deep .mat-ripple-element{
  height: 50%;
  width: 50%;
}

【讨论】：