Angular Material 的樣式（css）與文檔中的不一樣
[英]The style (css) of Angular Material is not the same of the one in the documentation
問題描述
這件事開始讓我很煩，所以我在這里尋求幫助！
我已經開始使用該材料處理 Angular 應用程序。
我想要與文檔中的材料組件完全相同的樣式。
讓我解釋一下我已經完成的步驟：
創建 Angular 應用程序
ng new my-dream-app添加材料
ng add @angular/material
? Choose a prebuilt theme name, or "custom" for a custom theme: Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
- 現在我嘗試在這里添加一個簡單的表單： https://material.angular.io/components/form-field/overview
所以在app.module.ts我添加了所需的導入：
...
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
MatInputModule,
MatFormFieldModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在app.component.html里面我放了組件：
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi">
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Leave a comment</mat-label>
<textarea matInput placeholder="Ex. It makes me feel..."></textarea>
</mat-form-field>
</form>
完全按照文檔中的報告
現在，如果我嘗試運行應用程序，我有：
取而代之的是：
我添加了背景顏色以增加易讀性，但我仍然注意到插入文本的顏色與示例不同。 我的是黑色的，他們的是白色的。
此外，聚焦元素的顏色不同（我的“最喜歡的食物”是#c2185b ，對他們來說是#e91e63 ）。
為什么示例和實際工作代碼之間存在所有這些差異？ （我選擇了相同的主題“粉色和藍灰色”）
我錯過了什么？
是否可以在不手動覆蓋 CSS 的情況下與文檔頁面具有相同的樣式？
完整代碼可在此處獲得： https://github.com/gixlg/AngularGCCU
2 個解決方案
解決方案1
2 已采納 2020-04-20 15:58:08
啟動npm install並在您的身體中添加 class <body class="mat-app-background"> ，或者如果您願意，您可以嘗試添加import { MatSidenavModule } from "@angular/material/sidenav"; 在您的 app.module.ts 中，並將您的 html 代碼放入<mat-sidenav-container>
解決方案2
0 2020-04-19 09:39:34
嘗試添加@import '@angular/material/prebuilt-themes/pink-bluegrey.css'; 在您的styles.css文件中。
如何使用 CSS 設置 Angular 材質標簽的樣式？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.