使用自定义覆盖 Material2 样式 CSS

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