Question

我在AngularMaterial（5.x）中有一个表格，我需要使用主题定义的主色和强调色设置悬停和选定的行背景颜色。

但我无法拨打我的css @import '~@angular/material/theming';，因为它告诉我$ accent没有定义。

我尝试添加$("#textbox").keydown(function(e) { console.log("keydown: "+e.keyCode); });但仍然遇到问题。我看一下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);
}

这是我的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>

目前它不是很干净但它有效。

AngularMaterial - 如何设置背景颜色：css或scss中的重音？

1 个答案: