如何修改Angular Material日期选择器标签内星号的默认颜色

问题说明 #

我在Web应用中使用Angular Material日期选择器，必填日期字段的mat-label后会默认显示星号标记必填项，代码如下：

<div class="row">
  <div class="mb-3">
    <mat-form-field appearance="outline" enabled>
      <mat-label enabled>DOB</mat-label>
      <input class="asterisk_input" formControlName="dob" #ref matInput [ngxMatDatetimePicker]="picker"
        placeholder="Choose a date" required />
      <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
      <mat-hint>YYYY-MM-DD</mat-hint>
      <ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false" [stepHour]="1"
        [stepMinute]="1" [stepSecond]="1" [touchUi]="false" [color]="undefined" [enableMeridian]="false"
        [disableMinute]="false" [hideTime]="true">
      </ngx-mat-datetime-picker>
      <mat-error *ngIf="f['dob'].errors">Invalid DOB</mat-error>
    </mat-form-field>
  </div>
</div>

尝试用以下CSS设置星号为红色但未生效：

span.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: red;
  font-size: 18px;
}

解决方案 #

1. 组件内穿透样式（仅当前组件生效） #

Angular默认的样式隔离会阻止组件内CSS影响Material内部DOM，用::ng-deep穿透，同时精准定位星号的专属类mat-mdc-form-field-required-marker：

::ng-deep .mat-mdc-form-field-required-marker {
  color: red !important;
  font-size: 18px;
}

2. 全局样式设置（全应用所有必填星号生效） #

在项目根目录的styles.css（或styles.scss）中添加代码，无需穿透：

.mat-mdc-form-field-required-marker {
  color: red;
  font-size: 18px;
}

3. 针对特定字段设置 #

如果只想让该日期选择器的星号变红，先给mat-form-field加自定义类：

<mat-form-field appearance="outline" enabled class="dob-required-field">
  <!-- 原有代码不变 -->
</mat-form-field>

再在组件内添加穿透样式：

::ng-deep .dob-required-field .mat-mdc-form-field-required-marker {
  color: red;
  font-size: 18px;
}

无效原因说明 #

• Angular的样式隔离机制导致组件内CSS无法作用到Material组件内部元素
• 之前的选择器未精准定位星号元素：星号对应的类是mat-mdc-form-field-required-marker，而非修改整个标签的颜色

内容的提问来源于stack exchange，提问作者rejkid