角材料样式类不起作用 [英] Angular Material Style Class not working
问题描述
我正在使用 Angular Material 将 Date Picker 添加到我的应用中.由于某种原因,角材未应用原始的角材样式.
I'm using Angular Material to add Date Picker to my app. For some reason the angular material is not applying the original angular material styles.
它如何在我的应用中显示:
应如何显示:
我所做的事情:
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
// Added this to the Angular Module whose components require the date picker
import {MatNativeDateModule, MatDatepickerModule} from "@angular/material";
//Added this in the root style.css file for the entire app
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
我不确定自己在做什么错.
I'm not sure what I'm doing wrong.
更新:
模块代码:
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from "@angular/router";
import {ProposalListComponent} from './components/proposal-list.component';
import {ProposalDetailComponent} from './components/proposal-detail.component';
import {ProposalEditComponent} from './components/proposal-edit.component';
import {ReactiveFormsModule} from "@angular/forms";
import {ProposalEditResolverService} from "./services/proposal-edit-resolver.service";
import {SectorResolverService} from "../root/services/sector-resolver.service";
import {ProposalAddComponent} from './components/proposal-add.component';
import {AuthGuard} from "../authentication/guards/auth.guard";
import {MatNativeDateModule, MatDatepickerModule, MatFormFieldModule, MatInputModule} from "@angular/material";
import {FileDropModule} from "ngx-file-drop";
import {ProposalListResolverService} from "./services/proposal-list-resolver.service";
@NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{
path: 'proposals',
component: ProposalListComponent,
canActivate: [AuthGuard],
resolve: {proposals: ProposalListResolverService}
},
{
path: 'proposals/:id',
component: ProposalEditComponent,
canActivate: [AuthGuard],
resolve: {proposal: ProposalEditResolverService, sector: SectorResolverService}
},
{
path: 'proposals/0/new',
component: ProposalAddComponent,
canActivate: [AuthGuard],
resolve: {sector: SectorResolverService}
}
]),
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatDatepickerModule,
MatNativeDateModule,
FileDropModule
],
declarations: [ProposalListComponent, ProposalDetailComponent, ProposalEditComponent, ProposalAddComponent],
providers: [ProposalEditResolverService, ProposalListResolverService]
})
export class ProposalModule {
}
HTML:
此代码位于上述模块的"ProposalEditComponent" 中.
This code is within the "ProposalEditComponent" which is part of the above module.
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
推荐答案
根据官方
所有主题和主题都必须包含主题
您的应用程序的样式.
Including a theme is required to apply all of the core and theme
styles to your application. 要开始使用预先构建的主题,请包括Angular之一
在您的应用程序中全局使用Material的预制主题. To get started with a prebuilt theme, include one of Angular
Material's prebuilt themes globally in your application. 您只需将以下内容添加到 You can simply add the following to your 或者您可以在head标签中直接使用
style.css
即可使其正常工作:style.css
in order to get it work:@import "~@angular/material/prebuilt-themes/indigo-pink.css";
<link>
标签.
PS:要创建自己的定制主题,请访问 https://material.angular.io/guide/theming
Or you can directly include using <link>
tag in your head tag.
P.S: To create your own custom built theme visit https://material.angular.io/guide/theming
这篇关于角材料样式类不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!