使用自定义CSS覆盖Material2样式

Question

我在Angular中有Datepicker元素。它是Material Design的标准组件。

当我尝试为此元素设置自己的样式时，它不适用于属性0。

如何修复它，以及如何更改默认组件的样式？

代码示例：

!important

Answer 1

您需要使用::ng-deep。在组件css中，将样式设置为以下内容：

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

Answer 2

另一个选择是在您的组件上将Calendar's javadoc设置为无：

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