如何从全局 css 文件中覆盖角度材质主题答案

【问题标题】：How to override angular material theme from global css file如何从全局 css 文件中覆盖角度材质主题
【发布时间】：2019-01-14 00:22:20
【问题描述】：

我正在使用棱角分明的材料。有时我想覆盖内置主题，在我的例子中是 indigo-pink.css。我是这样做的：

::ng-deep .mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element,
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, 
::ng-deep .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #10014B !important;
}

它对我来说很好用。但是，当我使用全局 css 文件中的相同代码时，我在其中设置了 encapsulation=none

encapsulation: ViewEncapsulation.None

其他文件中的代码看不到我的覆盖 css 类。有人知道为什么吗？

提前致谢！

【问题讨论】：

如果您删除 ::ng-deep，它应该可以工作。请参阅this stackblitz 中的复选框。请注意，我什至不必设置 !important 标志。

标签： angular angular-material

【解决方案1】：

如果您在全局级别编写 CSS，则不必使用 ::ng-deep，如果他们的 specificity 更高，则默认情况下会应用它们。要了解更多封装，您可以关注Scoping Your Styles in Angular With ViewEncapsulation。

【讨论】：