角度材料樣式類不起作用

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

或者您可以直接在 head 標簽中使用<link>標簽。

---

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）會告訴您（通過將其變灰）它不需要並且可以刪除。

Answer 6

您需要用<mat-form-field>包裹input元素，然后應用 Material 樣式。

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

你需要：

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

Answer 7

我知道這可能是一個新手答案，因為我是 Angular 的新手。 但是我使用 VSCode 和一個托管 HTML 站點的擴展來在您修改代碼時實時顯示更改。 當您嘗試使用它在本地托管 Angular 的組件 html 文件時，它將無法與來自材料 angular 的 CSS 一起使用。 因此，一種可能的解決方案是：在您的項目文件夾中打開一個終端並運行： ng serve這對我來說很棘手。

Answer 8

將此行添加到您的主 style.css 或其他內容中。

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

迪諾拉伊