web-dev-qa-db-ja.com

mat-list-itemからパディングを削除

mat-list angular/material2のコンポーネントは、16pxの上下のパディングを適用します。これを0pxにしたいです。より高い特異性を持つスタイルを適用しようとしましたが、機能していません（または間違っています）。オーバーライドしようとしているスタイルは次のとおりです。

mat-list-item-content style applying 16px padding

私はこれをオーバーライドしようとしています：

.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>
cssangularangular-material2
13
Craig

以前の提案はどれもAngular 6、7＆8

私が提案したのは、非推奨のソリューション（ https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep ）ですが、引き続き機能します：

:Host /deep/ .mat-list-item-content {
  padding: 0!important;
}
22
Cedric Arnould

別のオプションは、コンポーネントのViewEncapsulationをオフにすることです。

@Component({
    selector: 'list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.css'],
    encapsulation: ViewEncapsulation.None
})
2
Ian Hoar
.mat-list-item{
  max-height: 25px;
}
0
Annanya Jain

Angular Material 6では、リストアイテム間の空白スペースはパディングではなく、.mat-list-item 高さ。以下を使用して、よりコンパクトなリストを取得できます。

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

必要なのは、両方のクラスが同じ要素に適用されるため、.mat-list-itemと.mat-multi-lineの間のスペースを削除することだけです。つまり、セレクターを使用します。

.list .mat-list .mat-list-item.mat-multi-line .mat-list-item-content
0
Wilhelm Olejnik