Material2スタイルをカスタムCSSで上書きする

Question

私は、Datepicker要素をAngularにしました。マテリアルデザインの標準コンポーネントです。

この要素に独自のスタイルを設定しようとすると、プロパティ!importantでは機能しません。

これを修正する方法と、デフォルトのコンポーネントのスタイルを変更する方法はありますか？コードの

例：

.mat-datepicker-toggle { 
    margin-right: 10px !important; 
} 

Answer 1

別のオプションは、あなたのコンポーネントにNoneにView Encapsulationを設定することです：

@Component({ 
    templateUrl: './my.component.html' , 
    styleUrls: ['./my.component.scss'], //or .css, depending what you use 
    encapsulation: ViewEncapsulation.None, 
}) 

その後、あなたのコンポーネントのCSSにすることができますあなたが試したものを正確にしてください：

.mat-datepicker-toggle { 
    margin-right: 10px !important; 
} 

Answer 2

あなたは::ng-deepを使用する必要があります。コンポーネントのCSSで、次のように自分のスタイルを設定します。

::ng-deep .mat-datepicker-toggle { 
    margin-right: 10px !important; 
}