AngularMaterial-如何设置背景色:CSS或SCS中的重音

Question

i在AngularMaterial（5.X）中有一个表，我需要使用主题定义的主和重音颜色来设置悬停和选择的行背景颜色。

，但我无法在CSS background-color: mat-color($accent);中打电话，因为它告诉我$ accent并未定义。

我尝试添加@import '~@angular/material/theming';，但仍然会遇到问题。我查看角材料主题，但没有找到解决方案。

你能帮我吗？

感谢您的帮助！问候，Mike

Answer 1

对不起，没有提供代码。最后我用主题，得到了我需要的东西。这是我的代码：

@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the theme.
$my-app-primary: mat-palette($mat-indigo);
$my-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$my-app-theme:   mat-light-theme($my-app-primary, $my-app-accent);
// Include the default theme styles.
@include angular-material-theme($my-app-theme);
@mixin mat-icon-size($size: 24px) {
    font-size: $size;
    height: $size;
    width: $size;
    line-height: $size;
}
.table-row:hover {
    background-color: mat-color($my-app-accent, 50);
}
.selected-row {
    background-color: mat-color($my-app-accent, 200);
}

这是我的list-component.html：

    <div class="mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="select">
        <mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
          </mat-checkbox>
        </mat-header-cell>
        <mat-cell *matCellDef="let row">
          <mat-checkbox class="small-icon" (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row.sName) : null"
            [checked]="selection.isSelected(row.sName)">
          </mat-checkbox>
        </mat-cell>
      </ng-container>
      <ng-container matColumnDef="RowId">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.sRowId}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="Name">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.sName}} </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" [class.selected-row]="selection.isSelected(row.sName)" (click)="selection.toggle(row.sName)"
        class="table-row"></mat-row>
    </mat-table>
</div>

目前不是很干净，但起作用。