AngularMaterial - 背景色を設定する方法：cssまたはscssのアクセント？

Question

私はAngularMaterial（5.x）でテーブルを持っており、テーマで定義されたプライマリとアクセントの色を使って、ホバーと選択した行の背景色を設定する必要があります。

でも、私のCSSはbackground-color: mat-color($accent);で呼び出すことはできませんが、$アクセントは定義されていないと言われています。

私は@import '~@angular/material/theming';を追加しようとしましたが、それでも問題が発生しました。 Angular Material Themingを見ましたが、解決策が見つかりませんでした。

私を助けてもらえますか？

ありがとうございました！ よろしく、 マイク

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); 
} 

そして、ここでは私のリスト-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> 

それは一瞬のために非常にきれいではないのですが、それは動作します。