angle2素材のスライドトグルボタンのスタイル方法

Question

角度2と素材デザインが初めてです。 スライドトグルボタンのスタイルを小さくする方法を知りたいと思います。

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

以下の通りです。

Answer 1

私はあなたが/ deep/cssを使うことができることを発見しましたが、特定のクラスをターゲットにする必要もあります。

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

心に留めておくべき何か他のスタイルは、それらが適用されていることをアンギュラインラインで、このような方法で設定されているので、深いあなたは、この規則を破ることができますので、viewEncapsulationです。

関連スタックのポスト：How to overwrite angular 2 material styles?

係る角ドキュメント：https://angular.io/guide/component-styles#!#-deep-