Angular 6 MatInput样式不起作用

Angular 6 matInput styles are not working

我的Angular项目中已安装的材质

但是样式不能正常工作。

在我的应用程序中使用以下打包信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

"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";

材料模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@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 { }

应用模块：

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

组件：

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