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>

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

我知道这是一个比较老的问题，但是我想知道如何覆盖复选框旁边的列表项文本的填充方式。我尝试更改的样式类是

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

其左侧填充为16px。

诀窍是：必须进入 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>标记中

Answer 3

只需这样做：

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

Answer 4

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

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

Answer 5

要添加@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;
}

Answer 6

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

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

Answer 7

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

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

Answer 8

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

Answer 9

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

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

Answer 10

这对我有用

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

Answer 11

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;
    }
}

Answer 12

使用src / styles.scss文件覆盖全局样式

Answer 13

一种相当可重用的方法是从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;
}

Answer 14

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

例如

git stash show

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

从mat-list-item中删除填充

14 个答案: