从 mat-list-item 中删除填充答案

【问题标题】：Remove padding from mat-list-item从 mat-list-item 中删除填充
【发布时间】：2018-08-03 00:09:20
【问题描述】：

angular/material2 中的mat-list 组件应用了 16 像素的顶部和底部填充。我想做这个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>

【问题讨论】：

标签： css angular angular-material2

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这正是我想要的。泰

【解决方案3】：

以前的提议在 Angular 6、7 和 8 上都没有对我有用

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

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

【讨论】：

它仍然适用于 Angular 7，但我希望我有更好的解决方案
是的，我也是，我不太喜欢使用过时的解决方案......如果你找到了，请告诉我，我也很感兴趣 :)
当滚动条存在时我需要删除 padding-right...当然希望不必实现已弃用的代码：/
@CedricArnould 在下面查看我的答案

【解决方案4】：

.mat-list-item{
  max-height: 25px;
}

【讨论】：

最好提供更多信息。不仅仅是代码。

【解决方案5】：

另一个选项是关闭组件 ViewEncapsulation。

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

【讨论】：

【解决方案6】：

这对我有用

<mat-action-list *ngFor="let item of dataSource" style="padding-top: 0%;">

【讨论】：

这不是好方法。除非我们别无选择，否则我们不应该鼓励内联 CSS。内联 CSS 就像一个补丁；

【解决方案7】：

HTML

<mat-selection-list ...
    <mat-list-option formfilters *ngFor="let ...

SCSS（像 src/styles.scss 这样的低级 scss）

.mat-list-option[formfilters] {
    .mat-list-item-content {
        padding: 2px !important;
    }
}

【讨论】：

【解决方案8】：

我知道这是一个较老的问题，但我正在努力弄清楚如何覆盖复选框旁边的列表项文本的填充。我试图改变的样式类是

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

左内边距为 16 像素。

诀窍是：它必须放在 root 样式表中。如果您不希望它适用于任何地方，请添加另一个类以增加特异性。就我而言，我像这样添加了 .less-padding：

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

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

【讨论】：

【解决方案9】：

这样做就明白了：

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

【讨论】：

【解决方案10】：

我遇到了同样的问题。就这样解决了

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

【讨论】：

如果您能多解释一下该代码，将会很有帮助。
那个救了我的命
这对我来说非常有用

【解决方案11】：

一种相当可重用的方法是从 DevTools 或您正在使用的任何浏览器调试工具中获取选择器。

例如，在 Chrome 中：右键单击并检查要从中删除填充的元素，即 <mat-list-item> 元素。在样式窗格中，通过填充或您尝试更改的任何属性进行过滤。您将看到设置填充的选择器。

您需要将每一项复制到您的 CSS/SCSS 中并添加您需要的属性。例如，我从样式窗格中复制：

.mat-list-base[dense] .mat-list-item .mat-list-item-content, .mat-list-base[dense] .mat-list-option .mat-list-item-content

在您的样式表中使用它。您需要对样式窗格中的每个选择器块执行此操作。在您刚刚复制的部分中，单击填充旁边的橙色勾号。您将在下面的下一个选择器部分看到 padding 删除了删除线。将该部分选择器复制到您的样式表中。重复此过程，直到获得所需的所有选择器。

我的样式表最终看起来像这样，用于删除 <mat-list-item> 上的填充


.mat-list-base[dense] .mat-list-item .mat-list-item-content, .mat-list-base[dense] .mat-list-option .mat-list-item-content{
    padding: 0 !important;
    
}
.mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content {
    padding: 0 !important;
}

【讨论】：

【解决方案12】：

要在@ian-hoar 的回答之上添加，一旦您关闭了视图封装，如下所示：

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

您不必依赖 ::ng-deep 或 :host ::ng-deep 等，因为它们已被弃用。

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

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

【讨论】：

@Ousama 很高兴为您提供帮助:)

【解决方案13】：

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

例如，

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

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

【讨论】：