角度材质未正确加载样式

Posted 2023-03-07

【中文标题】角度材质未正确加载样式

【英文标题】：Angular material not loading styles correctly

【发布时间】：2019-05-11 03:28:57

【问题描述】：

我正在使用 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  

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

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

当我点击它时，它们似乎没有靛蓝粉色主题

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

我的问题可能出在哪里？

谢谢你的帮助

【问题讨论】：

您可能在 Material 的安装和设置中省略了几个步骤。请在stackblitz.com 上添加minimal reproducible example，以重现您的问题。

您是否点击了该复选框。因为它们看起来很像材料复选框。 material checkbox

我想我包含了所有信息。哪条线不见了？ @trichetriche

我更新了我的问题@NikolaiKiefer

你应该把它导入你的全局styles.scss而不是组件的scss。

【参考方案1】：

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

【讨论】：

是的。谢谢 。就是这样