[英]How can I make an inline HTML style override a CSS style?
我正在将值传递到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%;
}
将以下CSS添加到样式表
.row-color {
background-color: black;
}
此类要在html中mat-tag
类,例如<mat-row [ngClass]=('row-color')></mat-row>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.