Angular Material 的样式（css）与文档中的不一样

Question

这件事开始让我很烦，所以我在这里寻求帮助！
我已经开始使用该材料处理 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

Answer 1

启动npm install并在您的身体中添加 class <body class="mat-app-background"> ，或者如果您愿意，您可以尝试添加import { MatSidenavModule } from "@angular/material/sidenav"; 在您的 app.module.ts 中，并将您的 html 代码放入<mat-sidenav-container>

Answer 2

尝试添加@import '@angular/material/prebuilt-themes/pink-bluegrey.css'; 在您的styles.css文件中。

Angular Material 的样式（css）与文档中的不一样

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-04-20 15:58:08

解决方案2
0 2020-04-19 09:39:34

Angular Material 的样式（css）与文档中的不一样

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-04-20 15:58:08

解决方案2 0 2020-04-19 09:39:34

解决方案1
2 已采纳 2020-04-20 15:58:08

解决方案2
0 2020-04-19 09:39:34