javascript 覆盖Angular 材质输入字段标签中星号的默认颜色

cbjzeqam 于 2023-01-29 发布在 Java

关注(0)|答案(2)|浏览(100)

我的web应用程序中有一个Angular 材料日期选择器控件。默认情况下，它会在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>

...因此屏幕上显示如下：

我希望星星（星号）以red颜色显示。
我试过这个CSS：

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

......但是不起作用，有没有办法强制它是red。

JavaScript

来源：https://stackoverflow.com/questions/75264479/override-the-default-color-of-the-asterisk-in-the-label-of-an-angular-material-i

2条答案

按热度按时间

syqv5f0l1#

我发现你必须在组件的本地样式表中使用:host ::ng-deep，否则你的css选择器将不能被应用，另外，为了专门针对星号而不是整个标签文本，你必须在选择器中包含.mat-mdc-form-field-required-marker。
如果使用CSS，请将以下内容添加到本地组件的样式表中：

:host ::ng-deep .mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label .mat-mdc-form-field-required-marker {
    color: red;
}

如果使用SCSS，请添加以下选择器：

:host ::ng-deep .mdc-text-field:not(.mdc-text-field--disabled) {
    .mdc-floating-label {
        .mat-mdc-form-field-required-marker {
            color: red;
        }
    }
}

赞(0）回复(0）举报 2023-01-29

tjvv9vkg2#

您可以使用.mat-mdc-form-field-required-marker来设置星号的样式，并将color更改为您想要的样式。

封装

但是如果你没有在全局样式表中编写这个样式 *，它就不会工作。这是由于Angular组件封装组件级CSS中的每个样式规则的方式，这样你的样式就不会超出它们的范围，即Material Design组件。

但是这里你实际上想解决这个封装，一种方法是在你的@Component的encapsulation元数据中设置ViewEncapsulation.None：

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

或者在CSS选择器之前使用::ng-deep。::ng-deep只是禁用特定CSS规则的视图封装，这意味着您可以访问更深层次的组件，即：

::ng-deep .mat-mdc-form-field-required-marker { /* your code here */ }

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 覆盖Angular 材质输入字段标签中星号的默认颜色

2条答案

封装

相关问题

热门标签

最新问答