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

Question

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

是否可以关闭第 3 方组件的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——更好：

Material 有一些 variables.scss 文件，您可以在它们的源代码中使用它们，并且您可以轻松地覆盖它们的变量，例如颜色和东西。

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