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> 

그것은 순간을 위해 매우 깨끗 아니지만 작동 여기 내 코드입니다.