如何覆盖角度材料列表的css字段？

Question

我已经尝试过：

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

（从此Override Angular Material style in Angular component获得解决方案）

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

但是该字段总是被覆盖

Answer 1

要添加@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;
}

Answer 2

这是因为原始CSS属性更特定。.如果在CSS后面添加！important：

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

它应该可以解决您的问题。

Answer 3

请勿使用ng-deep和！important。

ng-deep 已过时。

！重要并不是很好的做法。

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

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