如何覆盖 Angular 材质列表的 css 字段？答案

【问题标题】：How to override css fields for Angular Material List?如何覆盖 Angular 材质列表的 css 字段？
【发布时间】：2020-03-08 23:59:13
【问题描述】：

我已经试过了：

 :host ::ng-deep .mat-list-item-content{
    flex-direction: column
    }

.myClass {flex-direction:column}，然后将我的班级添加到mat-list-item-content

但该字段总是被覆盖

【问题讨论】：

【解决方案1】：

不要使用 ng-deep 和 !important。

ng-deep 已弃用。

!important 并不是一个很好的做法。

在您的全局样式文件中写入更具体的样式。在更高的元素上添加某种容器/类并添加例如：

.example-container .mat-list-base .mat-list-item .mat-list-item-content {
  background: red;
}

【讨论】：

虽然我同意使用 !important 不一定是好的做法，但让你的 CSS 选择器更具体也不一定是好的做法。这是其他人组件样式的常见缺点。我一直在阅读 ng-deep 已被弃用，但我还没有找到任何不使用它的好解决方案。你有什么建议吗？
我实际上开始阅读有关 ng-deep 的一篇好的 stackoverflow 帖子：stackoverflow.com/questions/47024236/…
我也很高兴，ng-deep 已被弃用。我通过使用 ViewEncapsulation.None 找到了解决方案。如果您想了解更多信息，请点击此处的链接：angular.io/guide/component-styles#view-encapsulation
好吧，我同意，但如果我们要覆盖其他人的样式，我想最好让它们更具体并将所有更改保存在一个地方（如果我们想避免！重要的地狱）。关于 Encapsulation.None 和添加到全局样式文件差不多。唯一的区别是您将保存这些样式。
好吧，ng-deep 已经被弃用了很长时间，但是你必须记住，他们可能会从 x 版本的 angular 中删除它，如果你想稍后更新你的项目将不得不改变它。如果您有可能避免使用它，请避免使用它。

【解决方案2】：

要添加@adrian-sawicki 的答案，最好在下面关闭视图封装：

@Component({
selector: 'list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css'],
encapsulation: ViewEncapsulation.None
})

完成此操作后，您不必依赖 ::ng-deep 或 :host ::ng-deep 等，因为它们已被弃用。

例如，如果你想覆盖 mat-list-item 的填充，你所要做的就是

.example-container .mat-list-base .mat-list-item .mat-list-item-content {
  padding: 0 !important;
}

【讨论】：

@Ousama 谢谢:)
ViewEncapsulation.None带来什么副作用？
@Marcel 它的工作方式与将样式放在 style.scss 之类的全局文件中的工作方式相同 - 因此它可能导致样式分离错误的问题，您可能会花一些时间稍后才能找到原因“为什么我的样式被某些东西覆盖了？”在我看来，组件样式应该特定于组件本身。您需要一个全局样式 -> 将其添加到全局样式文件或创建这样的文件。