使用自定义 CSS 覆盖 Material2 样式 [英] Overriding Material2 Style with Custom CSS
本文介绍了使用自定义 CSS 覆盖 Material2 样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在 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;
}
推荐答案
另一个选项是设置 View Encapsulation 在您的组件上设置为 None :
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屋!
查看全文