有条件地将覆盖的 SCSS 应用于 Angular 组件答案

【问题标题】：Apply Overridden SCSS to Angular Component Conditionally有条件地将覆盖的 SCSS 应用于 Angular 组件
【发布时间】：2021-06-09 12:52:26
【问题描述】：

我正在尝试覆盖 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>

但我只想在布尔值为 false 时应用属性 color: red。我尝试使用 ngClass，但如何在 ngClass 语法中应用整个选择器 (.some-class .mat-form-field-wrapper)。

我的带有 ngclass 的 HTML（不完整）

<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>

在 css 或 scss 中是否有任何方法可以将整个选择器 .some-class .mat-form-field-wrapper 分配给变量或占位符类或不同的类，以便我可以使用 [ngClass] 语法直接使用该变量/占位符类。

【问题讨论】：

这能解决您的问题吗？ stackoverflow.com/questions/35269179/…
实际上并没有，因为在我的情况下，类选择器很复杂，不是一个可以直接应用的类
然后你可以申请[ngClass]="someMethod(variable)" 并创建一个将类名作为字符串返回的方法
不确定这将如何工作。你能详细说明一下吗？
查看this answer 中的第一个示例。对于多个类，您可以将其与 this answer 结合使用

标签： css angular sass angular-material

【解决方案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>

【讨论】：