Mat-Select 不应用默认设计模式答案

【问题标题】：Mat-Select does not apply the default design patternMat-Select 不应用默认设计模式
【发布时间】：2020-05-18 21:26:09
【问题描述】：

我正在尝试创建一个简单的 mat-select，这就是我在其中一个组件中指定代码的方式：

<mat-form-field>
    <mat-select>
        <mat-option>First Option</mat-option>
        <mat-option>Second Option</mat-option>
    </mat-select>
 </mat-form-field>

这就是我的 app.component.ts 的样子：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { MatToolbarModule } from "@angular/material/toolbar";
import { KniffelComponent } from "./components/kniffel/kniffel.component";
import { MatButtonModule } from "@angular/material/button";
import { MatDividerModule } from "@angular/material/divider";
import { MatListModule } from "@angular/material/list";
import { MatSelectModule } from "@angular/material/select";
import { MatFormFieldModule } from "@angular/material/form-field";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@NgModule({
  declarations: [AppComponent, KniffelComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    MatButtonModule,
    MatDividerModule,
    MatListModule,
    MatSelectModule,
    MatFormFieldModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

我已经尝试重新编译等，不幸的是它并没有改变任何东西。这是 ng --version 命令的输出：

Angular CLI: 9.0.4
Node: 12.13.0
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.4
@angular-devkit/core         9.0.4
@angular-devkit/schematics   9.0.4
@schematics/angular          9.0.4
@schematics/update           0.900.4
rxjs                         6.5.3

我没有收到编译器错误或类似的错误，只是看起来不像官方文档中的样子：https://material.angular.io/components/select/overview。我会添加图像来显示问题是什么，但是这个新帐户阻止我这样做......如果有人知道我可能做错了什么或问题可能是什么，我会很高兴尝试一些解决方案！提前感谢您的帮助:)

【问题讨论】：

你在 angular.json 文件或 style.css 文件中添加了默认 css 吗？

标签： angular angular-material

【解决方案1】：

angular 材质需要一些预定义的主题才能正常工作，其中一个预定义的主题是“deeppurple-amber”。打开样式 css 并包含以下行

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

您可以在此处阅读更多信息 https://material.angular.io/guide/theming

【讨论】：