角度材料样式类不起作用

问题描述

我正在使用 Angular Material 将 日期选择器 添加到我的应用中.出于某种原因，角材料没有应用原始的角材料样式.

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>

推荐答案

根据官方 Angular Material 文档:

需要包含一个主题才能应用所有的核心和主题样式到您的应用程序.

要开始使用预构建的主题，请包含 Angular 之一Material 在您的应用程序中的全局预构建主题.

To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application.

您可以简单地将以下内容添加到您的 style.css 中以使其工作:

You can simply add the following to your style.css in order to get it work:

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

或者您可以直接在 head 标签中使用 标签.

---

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

这篇关于角度材料样式类不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！