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

Question

我已经尝试过：

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

（从 Angular 组件中的这个Override Angular Material 样式获得解决方案）

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

但该字段总是被覆盖

标签： cssangularflexboxangular-material

Answer 1

要添加@adrian-sawicki 的答案，最好在下面关闭 View Encapsulation：

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

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

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

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