Angular Material 的样式（css）与文档中的样式（css）不同答案

【问题标题】：The style (css) of Angular Material is not the same of the one in the documentationAngular Material 的样式（css）与文档中的样式（css）不同
【发布时间】：2020-04-21 00:04:19
【问题描述】：

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

【问题讨论】：

标签： javascript html css angular angular-material

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：