如何用CSS变量精简Angular中Material Table的CSS代码？

1. 将列宽度整合到组件配置中复用 #

既然已经通过tableConfig管理列的类型、显示文本，直接在配置里新增width字段，通过Angular属性绑定动态给列设置样式，彻底消除.mat-column-colX这类冗余CSS。

修改配置结构 #

// 示例tableConfig
tableConfig = [
  { display: '列1', type: 'text', width: '80px', sticky: false },
  { display: '列2', type: 'date', width: '100px', sticky: false },
  { display: '列3', type: 'dateAndTime', width: '150px', sticky: false },
  // ...其他列配置
];

模板中动态绑定样式 #

<ng-container *ngFor="let col of displayedColumns; let i = index">
    <ng-container matColumnDef="{{ col }}" [sticky]="tableConfig[i].sticky">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="{{ col }}" 
            [style.min-width]="tableConfig[i].width">
            {{ tableConfig[i].display }}
        </th>
        <ng-container [ngSwitch]="tableConfig[i].type">
            <div *ngSwitchCase="'text'">
                <td mat-cell *matCellDef="let element" 
                    [style.min-width]="tableConfig[i].width">{{ element[col] }}</td>
            </div>
            <div *ngSwitchCase="'date'">
                <td mat-cell *matCellDef="let element" 
                    [style.min-width]="tableConfig[i].width">{{ element[col] | date : "yyyy/MM/dd" }}</td>
            </div>
            <div *ngSwitchCase="'dateAndTime'">
                <td mat-cell *matCellDef="let element" 
                    [style.min-width]="tableConfig[i].width">{{ element[col] | date : "yyyy/MM/dd HH:mm" : tableConfig[i].timeZone }}</td>
            </div>
        </ng-container>
    </ng-container>
</ng-container>

2. 按列类型统一设置默认宽度 #

如果同类型列的宽度大多一致，给列添加类型标识类，仅写一次CSS规则覆盖同类型列，仅特殊列单独定义样式。

模板添加类型类 #

<ng-container *ngFor="let col of displayedColumns; let i = index">
    <ng-container matColumnDef="{{ col }}" [sticky]="tableConfig[i].sticky">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="{{ col }}" 
            class="col-type-{{ tableConfig[i].type }}">
            {{ tableConfig[i].display }}
        </th>
        <ng-container [ngSwitch]="tableConfig[i].type">
            <div *ngSwitchCase="'text'">
                <td mat-cell *matCellDef="let element" 
                    class="col-type-{{ tableConfig[i].type }}">{{ element[col] }}</td>
            </div>
            <!-- 其他类型列同理添加类 -->
        </ng-container>
    </ng-container>
</ng-container>

统一写CSS规则 #

.mat-table {
    bottom: 56px;

    mat-column {
        align-items: center;
    }

    /* 按类型统一设置宽度 */
    .col-type-text {
        min-width: 100px;
    }
    .col-type-date {
        min-width: 120px;
    }
    .col-type-dateAndTime {
        min-width: 180px;
    }

    /* 仅特殊列单独覆盖 */
    .mat-column-col3 {
        min-width: 150px;
    }
}

3. 用CSS变量统一管理宽度值 #

如果需要统一调整宽度或复用宽度值，定义CSS变量，后续修改只需调整变量值，无需逐个修改规则。

定义CSS变量 #

.mat-table {
    bottom: 56px;
    --col-small: 80px;
    --col-medium: 100px;
    --col-large: 150px;

    mat-column {
        align-items: center;
    }
}

在配置或CSS中使用变量 #

// 配置中引用变量
tableConfig = [
  { display: '列1', type: 'text', width: 'var(--col-small)' },
  { display: '列2', type: 'date', width: 'var(--col-medium)' },
];

或者在CSS类中使用：

.col-type-text {
    min-width: var(--col-medium);
}

4. 封装指令实现跨组件复用 #

如果多个组件都有类似需求，封装Angular指令统一处理列宽度逻辑。

封装指令 #

import { Directive, Input, HostBinding } from '@angular/core';

@Directive({
  selector: '[appColumnWidth]'
})
export class ColumnWidthDirective {
  @Input() appColumnWidth: string;

  @HostBinding('style.min-width') get columnWidth() {
    return this.appColumnWidth || 'auto';
  }
}

模板中使用指令 #

<th mat-header-cell *matHeaderCellDef mat-sort-header="{{ col }}" 
    appColumnWidth="{{ tableConfig[i].width }}">
    {{ tableConfig[i].display }}
</th>
<td mat-cell *matCellDef="let element" 
    appColumnWidth="{{ tableConfig[i].width }}">{{ element[col] }}</td>

内容的提问来源于stack exchange，提问作者Francois Venter