Question

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

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

Answer 1

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

但要解决这个问题，我会给你几个解决方案：

1--丑陋：

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

所以转到你的app.ts并将封装更改为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--更好：

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

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

如何覆盖angular-material2样式？

1 个答案: