从mat-list-item中删除填充

Question

mat-listangular/material2中的组件应用16px的顶部和底部填充.我想把这个0px.我尝试应用具有更高特异性的样式但它不起作用(或者我做错了).我试图覆盖的样式是:

我试图用以下方法覆盖:

.list .mat-list .mat-list-item .mat-multi-line .mat-list-item-content {
  padding-top: 0;
  padding-bottom: 0;
}

<div class="list">
  <mat-list>
    <mat-list-item *ngFor="let item of queue">
      <h1 matLine>{{ item.id }}: {{ item.status}} {{ item.statusDate }}</h1>
      <p matLine>{{ item.name }}</p>
      <p matLine>for {{ item.customer }}</p>
      <div matLine>
        <button mat-icon-button (click)="openTab(item)">
          <mat-icon fontIcon="icon-open"></mat-icon>
        </button>
        <button *ngIf="showAssignToMe" mat-icon-button (click)="assignToMe(item)">
          <mat-icon fontIcon="icon-assign_to_me"></mat-icon>
        </button>
        <button mat-icon-button (click)="notes(item)">
          <mat-icon fontIcon="icon-comment"></mat-icon>
        </button>
      </div>
    </mat-list-item>
  </mat-list>
</div>

Answer 1

在Angular 6(和Angular 7)上,以前的任何一个命令都不适用于我

我提出的是一个弃用的解决方案(https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep),但它仍然可以继续工作:

:host /deep/ .mat-list-item-content {
  padding: 0!important;
}

Answer 2

另一种选择是关闭组件ViewEncapsulation。

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

Answer 3

我有同样的问题。像这样解决了

:host ::ng-deep .mat-list-item-content { padding: 0!important; }

Answer 4

在 Angular Material 6 中，列表项之间的空白不是因为填充而是因为.mat-list-item高度。您可以获得更紧凑的列表：

.mat-list .mat-list-item {
  height: 50px; /* default is 72px */
}

Answer 5

我知道这是一个较旧的问题，但我一直在绞尽脑汁试图找出如何覆盖复选框旁边的列表项文本的填充。我试图改变的风格类是

.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text

其左内边距为 16px。

诀窍是：它必须进入根样式表。如果您不希望它在任何地方都适用，请添加另一个类以增加特异性。就我而言，我添加了 .less-padding，如下所示：

.mat-list-base .less-padding.mat-list-item.mat-list-option .mat-list-item-content .mat-list-text { padding-left: 8px; }

将类添加到<mat-list-option>HTML 中的标记中

Answer 6

您所要做的就是删除.mat-list-item和之间的空格.mat-multi-line，因为这两个类都应用于同一个元素。换句话说，使用选择器：

.list .mat-list .mat-list-item.mat-multi-line .mat-list-item-content