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

Question

This thing it's starting to annoying me, so I'm here to ask help!这件事开始让我很烦，所以我在这里寻求帮助！
I've started working on an Angular Application with the Material.我已经开始使用该材料处理 Angular 应用程序。
I want the exact same style that the material components have in the documentation.我想要与文档中的材料组件完全相同的样式。

Let me explain the steps that I've done:让我解释一下我已经完成的步骤：

Creating an Angular Application创建 Angular 应用程序
ng new my-dream-app
Adding Material添加材料

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

Now I tried to add a simple form like the one here: https://material.angular.io/components/form-field/overview现在我尝试在这里添加一个简单的表单： https://material.angular.io/components/form-field/overview
So inside the app.module.ts I've added the needed import:所以在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 { }

and inside the app.component.html I've put the component:在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>

Exactly as reported on the Documentation完全按照文档中的报告

Now if I try to run the application I have that:现在，如果我尝试运行应用程序，我有：

instead then that:取而代之的是：

I added a background color tho increase the legibility but still I notice that the color of the inserted text is different from the example .我添加了背景颜色以增加易读性，但我仍然注意到插入文本的颜色与示例不同。 Mine is black and theirs is white.我的是黑色的，他们的是白色的。
Also, the color of the focused element is different ('Favorite food' for me is #c2185b and for them is #e91e63 ).此外，聚焦元素的颜色不同（我的“最喜欢的食物”是#c2185b ，对他们来说是#e91e63 ）。

Why there are all these differences between the example and the real working code?为什么示例和实际工作代码之间存在所有这些差异？ (I have selected the same the theme 'Pink & Blue-grey') （我选择了相同的主题“粉色和蓝灰色”）
Did I miss something?我错过了什么？
Is possible to have the same style to the documentation page without override by hand the CSS?是否可以在不手动覆盖 CSS 的情况下与文档页面具有相同的样式？

The full code is available here: https://github.com/gixlg/AngularGCCU完整代码可在此处获得： https://github.com/gixlg/AngularGCCU

Answer 1

launch npm install and in your body add the class <body class="mat-app-background"> , or if you want you can try to add import { MatSidenavModule } from "@angular/material/sidenav";启动npm install并在您的身体中添加 class <body class="mat-app-background"> ，或者如果您愿意，您可以尝试添加import { MatSidenavModule } from "@angular/material/sidenav"; in your app.module.ts and put your html code in <mat-sidenav-container>在您的 app.module.ts 中，并将您的 html 代码放入<mat-sidenav-container>

Answer 2

Try add @import '@angular/material/prebuilt-themes/pink-bluegrey.css';尝试添加@import '@angular/material/prebuilt-themes/pink-bluegrey.css'; in your styles.css file.在您的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