角材料无法正确加载样式

Question

我正在使用 Angular 材料来构建表格

这是我的表格组件：

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import {MatTableDataSource, MatPaginator, MatDialog, MatDialogConfig} from '@angular/material';
import { PAYMENTS } from "./payments-mock";



@Component({
  selector: 'app-payments',
  templateUrl: './payments.component.html',
  styleUrls: ['./payments.component.scss']
})
export class PaymentsComponent implements AfterViewInit {


  //Default values to checkboxes
  pending = false;
  approved = false;
  rejected = false;

  //List of displaying columns
  displayedColumns = ['PaymentDate','Amount','StatusDescription','Reason','Action'];
  dataSource = new MatTableDataSource(PAYMENTS);


  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.filterPredicate =
     (data, filter: string) => !filter || data.StatusDescription === filter;
  }

  //Methods for checkboxes
  pendingModelChecked(value: any) {
    const filter = value ? 'Pending' : null
    this.dataSource.filter = filter;
  }

  approvedModelChecked(value: any) {
    const filter = value ? 'Approved' : null
    this.dataSource.filter = filter;
  }

  rejectedModelChecked(value: any) {
    const filter = value ? 'Rejected' : null
    this.dataSource.filter = filter;
  }
}

这是我的app.module.ts文件

    import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CustomMaterialModule} from "./CustomMaterialModule";
import { PaymentsComponent } from './payments/payments.component';
import { MatPaginatorModule, MatCheckboxModule, MATERIAL_SANITY_CHECKS, MatDialogModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent,
    PaymentsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CustomMaterialModule,
    MatPaginatorModule,
    MatCheckboxModule,
    MatDialogModule,
    MatSelectModule,
    MatDatepickerModule,
    MatNativeDateModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    {
      provide: MATERIAL_SANITY_CHECKS,
      useValue: false
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我@import "~@angular/material/prebuilt-themes/indigo-pink.css";在支付组件 SCSS 文件中包含这样的材料主题

但似乎并非所有元素都有样式。例如复选框。

当我点击它时，看起来它们没有靛蓝色粉红色主题

但是我在控制台中没有任何错误。

我的问题在哪里？

感谢帮助

Answer 1

您需要将此行@import "~@angular/material/prebuilt-themes/indigo-pink.css放在通用style.scss样式表中，而不是组件的样式表中