Угловой материал неправильно загружает стили

Question

Я использую угловой материал, чтобы построить таблицу

Вот мой компонент для таблицы:

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, а не в таблицу компонента