MatSelectModule 样式无法正常工作 Angular 6

Question

我是 angular(6) 的新手。我在我的表单中使用 MatSelectModule 。它工作正常，但它的风格很奇怪，就像选项放在页面底部的某个地方一样。我试过方式，但失败了。帮我找出原因。这里有一些行，你需要分析。谢谢。

在XYZ.component.html

             <mat-form-field>
                <mat-select placeholder="Toppings" formControlName="toppings" multiple>
                  <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
                </mat-select>
              </mat-form-field>

在XYZ.component.ts

toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

在app.component.ts

import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Answer 1

您是否在您的应用中加入了预建主题 css？

根据 documentation 您可以使用其中一个预建主题或定义自定义主题

您可以从@angular/material/prebuilt-themes

将主题文件直接包含到您的应用程序中

可用的预建主题：

深紫色-amber.css
靛蓝-pink.css
粉色-bluegrey.css
紫色-green.css

如果您使用 Angular CLI，这就像在 styles.css 文件中包含一行一样简单：

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

或者，您也可以直接引用该文件。这看起来像：

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

MatSelectModule 样式无法正常工作 Angular 6

MatSelectModule style is not working accurately Angular 6

angular

angular6

angular-material-6