css - 如何使用自定义 css 类格式化 mat-field？

Question

我有代码:

<mat-form-field appearance="outline" class="col s6 m6 ml-0">
            <mat-label>Sistemas</mat-label>
            <mat-select (selectionChange)="changeApplication($event)" formControlName="aplicacoes">
                <mat-option *ngFor="let aplicacao of aplicacoes" [value]="aplicacao.sigla">
                    {{aplicacao.sigla}}
                </mat-option>
            </mat-select>
          </mat-form-field>

如果我放置一个自定义类，例如:custom-input，如何使用 angular-material 来设计它的样式？它已经有“aparecene”元素，但我想使用自定义类来使这个带有白色边框的特定输入。

影响元素中所有输入的我的 css:

    .mat-form-field {
       margin-top: 15px;

    &:nth-child(2n) {
       padding-left: 30px;
    }

    &.mat-form-field-appearance-outline {
       font-size: 1rem;

       .mat-form-field-outline {
           height: 60px;
           color: #FFF !important;
       }
    }
  }

谢谢大家

Answer 1

如果您想自定义轮廓外观而不影响任何其他输入组件，您可以将代码嵌入到 div 容器中并应用父类来覆盖默认轮廓颜色。

例如:将您的 mat-form-field 放入一个 div 容器中并向该 div 容器添加一个自定义类

它会起作用。