如何使内联 HTML 样式覆盖 CSS 样式？答案

【问题标题】：How can I make an inline HTML style override a CSS style?如何使内联 HTML 样式覆盖 CSS 样式？
【发布时间】：2019-08-22 00:51:21
【问题描述】：

我将一个值传递给 Angular Material Table 以将行颜色设置为黑色，但它一直被我的 css 样式表（将列设置为蓝色）覆盖？我以为内联样式优先，我在这里做错了什么？

我希望这优先（将行值设置为灰色）：

<mat-row *matRowDef="let row; columns: displayedColumns;" [ngStyle]="{'background-color': row.color}"></mat-row>

在这个 css 上（将单个列设置为蓝色，将所有其他列设置为灰色）：

.mat-column-paios, .mat-column-papc, .mat-column-pd, .mat-column-appfamily-pa,
.mat-column-appfamily-pd, .mat-column-eis, .mat-column-appfamily-eis {
    background-color: #26428b; /*#3d8299; blue*/
    color: white;
    flex: 0 0 7%;
}

这是 HTML：

<mat-table class="lessons-table mat-elevation-z8 overflow-x-auto" [dataSource]="serverLicenseDS" matSort (matSortChange)="sortData($event)">
    <ng-container matColumnDef="paios">
        <mat-header-cell *matHeaderCellDef>PAIOS</mat-header-cell>
        <mat-cell *matCellDef="let e">{{e.paios}}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" [ngStyle]="{'background-color': row.color}"></mat-row>
</mat-table>

我的 CSS：

.overflow-x-auto {
    overflow-x: auto;
}

.mat-column-select {
    overflow: initial;
}

.example-container {
    display: flex;
    flex-direction: column;
    min-width: 300px;
}

.example-header {
    min-height: 64px;
    padding: 8px 24px 0;
}

.mat-column-sumName {
    background-color: black; /*#3d8299; blue*/
    color: white;
    flex: 0 0 16%;
}

.mat-column-paios, .mat-column-papc, .mat-column-pd, .mat-column-appfamily-pa,
.mat-column-appfamily-pd, .mat-column-eis, .mat-column-appfamily-eis {
    background-color: #26428b; /*#3d8299; blue*/
    color: white;
    flex: 0 0 7%;
}

.mat-column-paplus, .mat-column-pd, .mat-column-dropoff,
 .mat-column-appfamily-dropoff, .mat-column-appfamily-paplus {
    background-color: #666665; /* #3d993d green*/
    color: white;
    flex: 0 0 7%;
}

【问题讨论】：

你试过/deep 吗？试一试，或者如果可能，请在 stackblitz.com 上创建一个演示示例并使用一些预期结果的图像文件更新问题。我会尝试解决这个问题。告诉我
你渲染的 HTML 是什么样子的？

标签： html css angular

【解决方案1】：

将下面的 css 添加到您的样式表中

.row-color {
    background-color: black;
 }

还有那个类到mat-tag in html 像这样<mat-row [ngClass]=('row-color')></mat-row>

【讨论】：