用颜色填充垫子的单元格

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列的单元格呈现为以下超文本标记语言：

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

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