时间戳

首页 > 解决方案 > 无法更改下拉 mat-form-field CSS - Angular 材质

css - 无法更改下拉 mat-form-field CSS - Angular 材质

问题描述

当我尝试使用角材料的 mat-form-field 在两件事上更改下拉的 CSS 时，我遇到了一个问题：

  1. 我的 CSS 不会更改属性<option> and <optgroup>。

  2. 无法更改:hoverCSS<option>

  3. 下拉菜单的位置“剪切”当前选定的选项。

我的下拉式 atm（默认角度材料）：

下拉自动取款机

html：

<mat-form-field class="drop-down" appearance="fill">
  <select matNativeControl [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
    <optgroup *ngFor="let mainModes of activeModArry; let i = index" label="{{ mainModes.name }}">
      <option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
        {{ subModes.name }}
      </option>
    </optgroup>
  </select>
</mat-form-field>

我想做的风格：

我需要的下拉菜单

真的需要一些帮助，如果有人以前遇到过这个问题:)

标签： cssangularangular-material

解决方案

在您的代码示例中，要使悬停起作用，您必须使用材料元素，然后在 css 中使用::ng-deep，还要验证它在组件的 .ts 中的 .ts 中没有封装集@Component。

在 html 中，它看起来像这样：

<mat-form-field class="drop-down" appearance="fill">
    <mat-select matNativeControl [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
      <mat-optgroup *ngFor="let mainModes of activeModArry; let i = index" label="{{ mainModes.name }}">
        <mat-option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
          {{ subModes.name }}
        </mat-option>
      </mat-optgroup>
    </mat-select>
  </mat-form-field>

而css会是这样的

::ng-deep mat-option:hover {
  ...
}

推荐阅读