有條件地將覆蓋的 SCSS 應用於 Angular 組件

Question

我正在嘗試覆蓋 Angular-Material 組件的 css 。 我正在使用

encapsulation:ViewEncapsulation.None

覆蓋以避免棄用/deep/或::ngdeep 。

所以我的 SCSS 看起來像這樣

.some-class {
  margin: 50px
}

.some-class .mat-form-field-wrapper {
  color: red;
}

我的 html 看起來像這樣

<div class="input-field">
   <mat-form-field appearance="outline" class="some-class">
      <mat-label>Password</mat-label>
      <input matInput formControlName="password" required />
   </mat-form-field>
</div>

但我想應用屬性color: red 。 我嘗試使用 ngClass 但如何在 ngClass 語法中應用整個選擇器（ .some-class.mat-form-field-wrapper ）。

我的 HTML 和 ngclass（不完整）

<div class="input-field">
   <mat-form-field appearance="outline" class="some-class" [ngClass]="{
        ' *some way to get the class here* ':
          !passwordsRequirementSatisfied && f.password.touched
      }">
      <mat-label>Password</mat-label>
      <input matInput formControlName="password" required />
   </mat-form-field>
</div>

Is there any way in css or scss that I can assign the entire selector .some-class.mat-form-field-wrapper to a variable or a placeholder class or a different class so that I can use that variable/placeholder class directly with [ngClass] 語法。

Answer 1

你可以嘗試這樣的事情：

 .some-class.is-invalid.mat-form-field-wrapper { color: red; }

 <div class="input-field"> <mat-form-field appearance="outline" class="some-class" [class.is-invalid]=".passwordsRequirementSatisfied && f.password.touched"> <mat-label>Password</mat-label> <input matInput formControlName="password" required /> </mat-form-field> </div>