角度材料样式类不起作用

Question

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

它如何在我的应用程序中显示：

它应该如何显示：

我做了什么：

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

我不确定我做错了什么。

更新：

模块代码：

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”中，它是上述模块的一部分。

<input matInput [matDatepicker]="picker" placeholder="Choose a date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>

Answer 1

根据Angular Material 的官方文档：

需要包含主题才能将所有核心和主题样式应用于您的应用程序。

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

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

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

或者您可以直接<link>在 head 标签中包含 using标签。

PS：要创建自己的自定义主题，请访问https://material.angular.io/guide/theming

Answer 2

浪费了 2 天后它起作用了。

如果您没有找到任何解决方案，只需再次添加角材料。它不会影响您的代码，但会添加 CSS。不要忘记重新启动 angular 服务器。

ng add @angular/material

Answer 3

您是否尝试过包含 MatInputModule 和 MatFormFieldModule？

我认为您仍然需要包含 MatInputModule，因为您正在处理输入，以便 Angular Material 将初始化输入的样式。

// 添加这个

import {MatNativeDateModule, MatDatepickerModule,MatFormFieldModule,MatInputModule } from "@angular/material";

如果您还包含 MatFormFieldModule 也更好，因为您正在处理表单字段。

和 MatInputModule 被设计为在 MatFormFieldModule 内工作。// 检查此链接https://material.angular.io/components/form-field/overview

示例代码。

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

希望这可以帮助 ...

Answer 4

尝试将样式文件添加到 angular.json，例如您可以使用 deeppurple amber 预建主题：

"styles": [
    "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
]

此页面上的更多信息：https : //material.angular.io/guide/getting-started#step-4-include-a-theme

Answer 5

这是基于 Angular 11 的。就像大家说的，我确实确保将样式添加到angular.json（已经存在）并在app.module.ts. 尽管如此，我的风格仍然很混乱。非常有趣的是，它确实选择了主题颜色，但没有选择控件样式。我最终在每个组件文件中添加了另一个导入，其中使用了 mat* 组件并且工作正常。

import { MatButtonModule } from "@angular/material/button";

请记住，当您添加该导入时，您的 IDE（在我的例子中是 VS Code 和 Visual Studio 2019）会告诉您（通过将其灰显）不需要它并且可以将其删除。