从 mat-list-item 中删除填充

Question

angular/material2 中的 mat-list 组件应用了 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>

原文由 Craig 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在您的 styles.sccs 文件中覆盖样式。

例如，

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

注意使用 !important ，没有 !important 样式将被主题覆盖。

原文由 Joel Stevick 发布，翻译遵循 CC BY-SA 4.0 许可协议