如何覆盖angular-material2样式？

Question

我正在使用Angular2和Material Design Components 。 并且想要覆盖一些样式，但由于ViewEncapsulation看起来不可能。

是否可以为第三方组件关闭ViewEncapsulation （ViewEncapsulation.None）？

Answer 1

我个人不会触及实际的第三方来源（比如更改封装），原因是他们的风格可能会搞砸。

但为了解决这个问题，我给你几个解决方案：

1--丑陋的：

如果viewEncapsulation为none，您可以从组件（可能是顶级组件）覆盖您想要的任何内容。

所以转到你的应用程序并将封装更改为无，并在其中执行您想要的操作：

  inside your app.scss or css

    md-input {

       input { color:red} 

     // or whatever style you want to override , sometimes you'll need !important .
    }

2--更好：

Material有一些variables.scss文件，你可以在它们的源代码中使用它们，你可以很容易地覆盖它们的变量，比如颜色和东西。

通常，只有当你执行覆盖的组件，它的封装是none时才能覆盖全局css，否则你的样式不会超出该组件。