Question

我是angular（6）的新手。我在表单中使用了 MatSelectModule 。它工作正常，但是它的样式很奇怪，就像选项位于页面底部的某个位置一样。我已经尝试过this的方式，但是失败了。帮我找出原因。这是一些行，您需要进行分析。谢谢。

在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将主题文件直接包含到应用程序中

可用的预制主题：

deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
purple-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

1 个答案: