角材料样式类不起作用
Posted
技术标签:
【中文标题】角材料样式类不起作用【英文标题】: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
?
有关于这个主题的消息吗?我面临同样的问题。该样式不适用于我的日期选择器输入
【参考方案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';
迪诺拉杰
【讨论】:
以上是关于角材料样式类不起作用的主要内容,如果未能解决你的问题,请参考以下文章
mat-autoComplete 中的占位符不起作用,如 Angular Material Documentation 中所示