Question

在我的Angular项目中安装了材质

但是样式不能正常工作。

在我的应用程序中使用以下包装

"dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.2.0",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "6.0.1",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@swimlane/ngx-datatable": "^15.0.2",
    "angular-bootstrap-md": "^6.1.1",
    "bootstrap": "3.3.5",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "ng-drag-drop": "^5.0.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.5.2",
    "zone.js": "^0.8.26"
  },

Style.scss

@import“ ~@angular/material/prebuilt-themes/indigo-pink.css”;

材料模块：

@NgModule({
  imports: [
    CommonModule,
    MatButtonModule, MatCheckboxModule,
    MatMenuModule, MatToolbarModule, MatGridListModule,
    MatExpansionModule, MatCardModule,
    MatTooltipModule, MatListModule, MatTableModule,
    NgxDatatableModule
    // MDBBootstrapModule,
  ],
  exports: [
    CommonModule,
    MatButtonModule, MatCheckboxModule,
    MatMenuModule, MatToolbarModule, MatGridListModule,
    MatExpansionModule, MatCardModule,
    MatTooltipModule, MatListModule, MatIconModule,
    MatTableModule, MatPaginatorModule, MatSortModule,
    MatInputModule, MatDialogModule, MatFormFieldModule,
    NgxDatatableModule, MatSelectModule, MatRadioModule,
    MatDatepickerModule, MatNativeDateModule, MatChipsModule,
    ReactiveFormsModule, FormsModule, MatButtonToggleModule,
    MatTabsModule
    // MDBBootstrapModule,
  ],
  providers: [
    MatDatepickerModule
  ],
  declarations: []
})
export class MaterialModule { }

应用模块：

import { MaterialModule } from './material/material.module';

组件：

<input matInput placeholder="email" type="text" formControlName="username">

Answer 1

我认为您需要导入BrowserAnimationsModule。

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

@NgModule({
  imports: [BrowserAnimationsModule],
})

Angular 6 matInput样式不起作用

1 个答案: