用颜色填充垫桌的单元格

Question

我在mat-table有一个相当基本的列，如下所示：

<mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="zone">
        <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
        <mat-cell *matCellDef="let item" [style.background-color]="'#' + item.zone.color"></mat-cell>
    </ng-container>

    ...

</mat-table>

我想填充zone列单元格，其中一些颜色在行之间变化（不是整行，只有该特定列的单元格）。

到目前为止，我所能找到的只是为整行着色。

zone列的单元格呈现为以下HTML：

<mat-cell class="mat-cell cdk-column-zone mat-column-zone" role="gridcell" style="background-color: rgb(255, 182, 193);" _ngcontent-c8=""></mat-cell>

我们可以看到background-color样式属性已被正确应用，但问题是单元格的高度为0.因为单元格没有任何内容。 我试着把一个  在单元格内部，但它显示为带有顶部和底部边距的细条：

我想要的是为整个细胞着色，包括其边缘。

我们如何在mat-table单个细胞着色？

Answer 1

如果查看Angular Material提供的默认CSS，您会注意到mat-row元素的最小高度为48px 。

但是如果你看一下mat-cell你会注意到它没有最小的默认高度设置，它依赖于父元素（行）显示/对齐属性来保持居中。

如果查看上一个图像，它会准确显示代码中背景颜色属性所着色的区域。

因此，要更改整个单元格的背景颜色，您可以选择将行使用的最小高度设置为单元格，这可以使用以下CSS声明来完成：

.mat-cell, .mat-header-cell {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
}

然后简单地使用背景颜色属性来更改颜色。