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

Question

我使用什么类来设置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>

Answer 1

我假设您的组件是封装的组件...

top_plt= top_plt.groupby('A')['Amount'].sum().reset_index()

下面的代码用于设置波纹。

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

Answer 2

您尝试过

mat-slide-toggle:focus

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