本文介绍了角度材料样式类不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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