Angular mat-select 无法正确设置多个

Question

我有一个 Angular 13 应用程序，并且正在使用 Angular Material。 我的问题是垫选择控件在多个选项中看起来不正确。

我的代码：

.ts

toppings = new FormControl('');
toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

.html

<mat-form-field appearance="outline">
<mat-label>Toppings single</mat-label>
<mat-select [formControl]="toppings">
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>

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

结果：

为什么会显示内部矩形？

Answer 1

可能是

outline

或

border

或

box-shadow

。

您可以通过以下方式禁用它：

select.no-outline{
   border: none;
   outline: none;
   box-shadow: none;
}

<mat-select [formControl]="toppings" multiple ngClass="no-outline">

Answer 2

我发现了问题，选择样式正在被 tailwind css 表单模块更改。 我已删除该模块，现在一切正常。

Answer 3

我找到了这个问题的部分解决方案。就我而言，这是由于通过 CDN 加载的 Flowbite CSS 造成的样式冲突引起的，在使用“multiple”属性时，它干扰了 mat-select 组件的样式。为了解决这个问题，我必须删除 Flowbite CDN。不幸的是，我目前无法找到其他解决方案。 在此输入图片描述

在此输入图片描述