防止角材质 css 样式传播到其他组件答案

【问题标题】：Prevent angular material css styles from propagating to other components防止角材质 css 样式传播到其他组件
【发布时间】：2020-07-02 00:37:47
【问题描述】：

所以我在我的全局 scss 样式中覆盖了角材质样式，如下所示：

.mat-form-field-infix{
   padding: 0.5em 0 0.5em 0 !important;
}

然后我想对组件中的同一元素应用不同的填充，因为我需要更多空间来查看更多数据；这是我在组件 scss 样式中所做的：

:host ::ng-deep .mat-form-field-infix{
   padding: 0.2em 0 0.2em 0 !important;
}

但最后一个样式在加载后会传播到所有组件。所以问题是如何防止这种行为？

【问题讨论】：

【解决方案1】：

请注意，::ng-deep 注定会被弃用：请参阅Special selectors。

但是，您可以遵循 Yuriy 所描述的策略：如果您想要为 my-roomy-component 的所有后代提供额外的填充，您可以从全局样式中定位 CSS，例如

my-roomy-component .mat-form-field-infix {
  padding: 0.2em 0 0.2em 0 !important;
}

而且，正如 Yuriy 建议的那样，为选择器添加更多特异性以帮助填充在没有 !important 的情况下生效。或者，外部组件可以将其视图封装设置为 None，以便其样式变为全局，但再次使用 CSS 选择器。

【讨论】：