用自定義CSS覆蓋Material2樣式

Question

我在Angular中有Datepicker元素。它是Material Design的標準組件。

當我嘗試將自己的樣式設置爲此元素時，它不適用於屬性!important。

如何解決它，以及如何更改默認組件的樣式？代碼

例子：

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

Answer 1

另一種選擇是將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; 
}