[英]Apply Overridden SCSS to Angular Component Conditionally
I am trying to override the css for an Angular-Material component.我正在尝试覆盖 Angular-Material 组件的 css 。 I am using the我正在使用
encapsulation:ViewEncapsulation.None
to override in order to avoid the deprecated /deep/
or ::ngdeep
.覆盖以避免弃用/deep/
或::ngdeep
。
so my SCSS looks like this所以我的 SCSS 看起来像这样
.some-class {
margin: 50px
}
.some-class .mat-form-field-wrapper {
color: red;
}
and my html looks like this我的 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>
but I want to apply the property color: red
only when a boolean is false.但我想应用属性color: red
。 I tried to use ngClass but how do I appply the entire selector ( .some-class.mat-form-field-wrapper
) in the ngClass syntax.我尝试使用 ngClass 但如何在 ngClass 语法中应用整个选择器( .some-class.mat-form-field-wrapper
)。
my HTML with ngclass (incomplete)我的 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 the [ngClass] syntax. 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] 语法。
You can try something like this:你可以尝试这样的事情:
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.