角材料样式类不起作用答案

【问题标题】：Angular Material Style Class not working角材料样式类不起作用
【发布时间】：2018-06-25 10:53:58
【问题描述】：

我正在使用 Angular Material 将 Date Picker 添加到我的应用中。由于某种原因，角度材质未应用原始角度材质样式。

它在我的应用中的显示方式：

应该如何显示：

我做了什么：

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>

【问题讨论】：

您是否收到任何开发者控制台错误？另外，请发布html 和相关模块！
@Z.Bagley 感谢您的评论。根本没有记录错误。日期选择器工作正常，只是样式不适用。请查看我更新的问题以了解您要求的详细信息
此时看起来更像是版本不匹配错误。 MatNativeDateModule 已旧且不再使用，应使用 import {MatDatepickerModule} from '@angular/material/datepicker'; 导入 MatDatepickerModule。尝试删除MatNativeDateModule 和/或将导入目录换成MatDatepickerModule。如果不是，则与 package.json 和 npm 有更复杂的版本控制问题。
没有BrowserAnimationsModule?
有关于这个主题的消息吗？我面临同样的问题。该样式不适用于我的日期选择器输入

标签： javascript html angular angular-material2

【解决方案1】：

据Angular Material官方Documentation：

需要包含一个主题才能应用所有的核心和主题为您的应用添加样式。

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

您只需将以下内容添加到您的 style.css 即可使其正常工作：

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

或者你可以直接在你的head标签中包含使用<link>标签。

P.S：要创建您自己的定制主题，请访问https://material.angular.io/guide/theming

【讨论】：

【解决方案2】：

浪费了 2 天后它工作了。

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

ng add @angular/material

【讨论】：

【解决方案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>

希望这会有所帮助...

【讨论】：

这对我来说是个问题。值得注意的是，最近版本的路径已更改： import { MatFormFieldModule } from '@angular/material/form-field';从'@angular/material/input'导入 { MatInputModule };

【解决方案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

【讨论】：

顺便说一句，这已经存在于我的 angular.json 中，但我必须重新启动 angular serve 才能看到应用的材质样式。
你应该用那个评论来回答，这样我就可以投票了?

【解决方案5】：

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

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

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

【讨论】：

我完全忘了导入这个模块......这就是我遇到的问题。谢谢你的回答！
我有 Angular11，我尝试在每个组件中导入 mat 组件，但仍然面临 css 类仍然无法正常工作的问题。我尝试了这里建议的几乎所有选项，但仍然不适合我

【解决方案6】：

您需要用<mat-form-field> 包裹input 元素，然后应用材质样式。

<input matInput .... /> 本身是不够的。

你需要：

<mat-form-field>
    <input matInput .... />
</mat-form-field>

【讨论】：

【解决方案7】：

我知道这可能是一个新手答案，因为我是 Angular 的新手。但是，当您对代码进行修改时，我使用 VSCode 和托管 HTML 站点的扩展程序来实时显示更改。当您尝试使用它在本地托管 Angular 的组件 html 文件时，它将无法与材质 Angular 中的 CSS 一起使用。因此，一种可能的解决方案是：在您的项目文件夹中打开一个终端并运行： ng serve 这对我来说很棘手。

【讨论】：

【解决方案8】：

将此行添加到您的主要 style.css 或其他内容中。

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

迪诺拉杰

【讨论】：