angular - 如何设置 angular2 Material 滑动切换按钮的样式

Question

我是 Angular 2 和 Material Design 的新手。我想知道如何将滑动切换按钮的样式设置得更小。

 <div class="example-section">
  <mat-slide-toggle class="line-toggle"
    <span class="font-size-12">Slide Me</span>
  </mat-slide-toggle>
</div>

css如下

  .example-section {
  display: flex;
  align-content: center;
  align-items: center;
  height: 18px;
  margin-top: -12px;
}
 .line-toggle{
  height: 10px;
  line-height: 8px;
 }

我想减小按钮的大小并减小 slider 的高度。

Answer 1

我发现您可以在 css 中使用/deep/，但您还必须针对特定类。

/deep/ .mat-slide-toggle-bar {
  height: 7px !important;
}
/deep/ .mat-slide-toggle-thumb {
  height: 10px !important;
  width: 10px !important;
}

另外要记住的是 viewEncapsulation，因为 deep 允许您打破这种约定，因为 Angular 的样式设置方式是内嵌应用的。

相关堆栈帖子:How to overwrite angular 2 material styles?

相关 Angular 文档:https://angular.io/guide/component-styles#!#-deep-