用自定义CSS覆盖Material2样式 [英] Overriding Material2 Style with Custom CSS

问题描述

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

I have Datepicker element in Angular. It is standard component from Material Design.

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

When I try to set own styles to this element, it does not work with property !important.

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

How to fix it, and how to change the default component's styles?

代码示例:

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

推荐答案

另一个选项是设置

Another option is to set the View Encapsulation to None on your component:

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

然后在组件css中，您可以完全执行您尝试的操作:

Then in your component css you can do exactly what you tried:

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

这篇关于用自定义CSS覆盖Material2样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！