angular - 如何覆盖 angular-material2 样式？

Question

我将 Angular2 与 Material Design Components 一起使用.并且想覆盖一些样式，但由于 ViewEncapsulation 的缘故，这似乎是不可能的。

是否可以关闭第 3 方组件的 ViewEncapsulation(ViewEncapsulation.None)？

Answer 1

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

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

1-- 丑陋的:

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

所以转到你的 app.ts 并将封装更改为无，然后在其中做任何你想做的事情:

  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，否则您的样式将不会超出该组件。