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

查看:33
本文介绍了使用自定义 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆