如果选中了mat-slide-toggle，则自定义mat-slide-toggle不正确

Question

我有一个mat-slide-toggle，并且已经根据下面的Css自定义了样式，但是当检查幻灯片时，拇指位于中间，但应将其作为默认幻灯片向右对齐。

mat-slide-toggle-thumb-container {
    width: 64px !important;
    height: 64px !important;
  }
.mat-slide-toggle-thumb {
      border: 1px solid #707070;
      background-color: #fff;
      width: 64px !important;
      height: 64px !important;
  }
  .mat-slide-toggle-bar {
    background-color: lightgrey;
    border-radius: 24px !important;
    width: 112px !important;
    height: 48px !important;
  }

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #1a74e8; 
    border:none;
}
 .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: rgba(26, 116, 232, .1);
    border:none;
}
.mat-slide-toggle .mat-slide-toggle-ripple {
    width: 0px !important;
    height: 0px !important;

}

有什么办法解决这个问题吗？