在我們的項目中使用材料表時，我們一直在努力解決css方面的大量代碼重復問題。用設定的寬度定義每一列(為了可讀性) 例如:

.mat-table {
            bottom: 56px;

            mat-column {
                align-items: center;
            }

            .mat-column-col1 {
                min-width: 80px;
            }

            .mat-column-col2 {
                min-width: 100px;
            }

            .mat-column-col3 {
                min-width: 150px;
            }

            .mat-column-col4 {
                min-width: 100px;
            }
}

我們最近構建了一個組件來處理為我們構建一個表，但是遇到了一個問題，那就是我們必須定義許多自定義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-header-cell mat-sort-header="{{ col }}">
                        {{ tableConfig[i].display }}
                    </th>
                    <ng-container [ngSwitch]="tableConfig[i].type">
                        <div *ngSwitchCase="'text'">
                            <td mat-cell *matCellDef="let element">{{ element[col] }}</td>
                        </div>
                        <div *ngSwitchCase="'date'">
                            <td mat-cell *matCellDef="let element">{{ element[col] | date : "yyyy/MM/dd" }}</td>
                        </div>
                        <div *ngSwitchCase="'dateAndTime'">
                            <td mat-cell *matCellDef="let element">{{ element[col] | date : "yyyy/MM/dd HH:mm" : tableConfig[i].timeZone }}</td>
                        </div>

這或多或少是我們構建html的方式，然后typescript進行一些轉換以獲得正確的格式。

我們如何清理css？

我們努力在css參數化上找到許多有用的鏈接，但最終清理了大量的鏈接

<th mat-header-cell *matHeaderCellDef mat-header-cell mat-sort-header="{{ col }}" class="col-width" style="--width: {{ tableConfig[i].width }}">

首先查看頭部定義，您需要定義一個使用變量的類(在我們的例子中& quot列寬& quot)然后在mix style = & quot-寬度:{{ tableConfig[i]。width } } & quot我們有一個完整的ts端，它用一列的相關信息構建了一個大數組。

然后在css中你可以定義它來使用變量

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

現在我們可以添加我們需要的所有變量，這使我們的類型腳本保持同樣的復雜性，但是我們的HTML和CSS非常簡單