使用自定义CSS覆盖Material2样式

Question

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

当我尝试为此元素设置自己的样式时,它不适用于属性!important.

如何解决它,以及如何更改默认组件的样式？

代码示例:

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

Answer 1

你需要使用::ng-deep.在组件css中,将样式设置为以下内容:

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

Answer 2

另一个选项是在组件上将View Encapsulation设置为None:

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