在 SCSS 中覆盖 <style> 类而不在 Angular 中使用 !important答案

【问题标题】：Override <style> class in SCSS without using !important in Angular在 SCSS 中覆盖 <style> 类而不在 Angular 中使用 !important
【发布时间】：2021-07-30 01:49:33
【问题描述】：

我在 Angular 组件中有以下 HTML：

<div class="section-column" id="test">
  <div class="section-row">
      <mat-select
        name="select"
        [styles]="formFieldStyle"
        placeHolder="State Reporting Agency"
      >
      </mat-select>
      <mat-input
        name="contactName"
        [styles]="formFieldStyle"
        [required]="true"
      >
      </mat-input>
  </div>
  <div class="section-row">
    <mat-input
      name="number"
      [styles]="formFieldStyle"
      [required]="true"
    >
    </mat-input>
    <mat-input
      name="contactPhone"
      [styles]="formFieldStyle"
      placeholder="Contact Phone"
      [required]="true"
    >
    </mat-input>   
  </div>
</div>

mat-input 在其中创建一个mat-form-field 元素，如下所示：

<mat-input name="contactPhone" placeholder="Contact Phone">
  <mat-form-field _ngcontent-qbl-c408="" class="mat-form-field ng-tns-c135-4 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder ng-untouched ng-pristine mat-form-field-should-float ng-valid">
    <div class="mat-form-field-wrapper ng-tns-c135-4">
      <div class="mat-form-field-flex ng-tns-c135-4">
        <div class="mat-form-field-infix ng-tns-c135-4">
          <input _ngcontent-qbl-c408="" matinput="" class="mat-input-element mat-form-field-autofill-control ng-tns-c135-4 ng-untouched ng-pristine cdk-text-field-autofill-monitored ng-valid" name="contactPhone" type="text" ng-reflect-type="" ng-reflect-placeholder="Contact Phone" ng-reflect-form="[object Object]" ng-reflect-required="true" required="" id="mat-input-2" data-placeholder="Contact Phone" aria-invalid="false" aria-required="true">
            <span class="mat-form-field-label-wrapper ng-tns-c135-4">
              <label class="mat-form-field-label ng-tns-c135-4 ng-star-inserted" ng-reflect-disabled="true" id="mat-form-field-label-7" ng-reflect-ng-switch="false" for="mat-input-2" aria-owns="mat-input-2">
                <span class="ng-tns-c135-4 ng-star-inserted">Contact Phone</span>
                <span aria-hidden="true" class="mat-placeholder-required mat-form-field-required-marker ng-tns-c135-4 ng-star-inserted"> *</span>
              </label>
            </span>
          </div>
        </div>
        <div class="mat-form-field-underline ng-tns-c135-4 ng-star-inserted">
          <span class="mat-form-field-ripple ng-tns-c135-4"></span>
        </div>
        <div class="mat-form-field-subscript-wrapper ng-tns-c135-4" ng-reflect-ng-switch="hint">
          <div class="mat-form-field-hint-wrapper ng-tns-c135-4 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">
            <div class="mat-form-field-hint-spacer ng-tns-c135-4"></div>
          </div>
        </div>
      </div>
    </mat-form-field>
  </mat-input>

div 的类为 .mat-form-field-infix。这出现在自动嵌入的<style> 中。该类如下所示：

.mat-form-field-infix {
    display: block;
    position: relative;
    flex: auto;
    min-width: 0;
    width: 180px;
}

对于这个 div“测试”，我希望宽度扩展到 220px，而不必将 !important 添加到属性中。到目前为止，我已经尝试将以下类添加到组件的 SCSS 文件中，但没有成功：

mat-form-field {
  width: 220px;
}

mat-form-field.mat-form-field {
  width: 220px;
}

mat-input {
  mat-form-field.mat-form-field {
    width: 220px;
  }
}

.mat-form-field-infix {
  width: 220px;
}

mat-form-field .mat-form-field-infix {
  width: 220px;
}

我能做什么？

【问题讨论】：

我认为!important 是唯一的方法stackoverflow.com/questions/16813220/…
如果添加 !important 是否有效？
@Chellappanவ 实际上，我刚刚检查过，但没有。
mat-form-field 元素是否在 DOM 中呈现为 div？如果是这样，那么您的 mat-form-field .mat-form-field-infix 选择器将不会针对它。在任何情况下，如果您添加前导句点，它将改为引用 .mat-form-field 类，这应该会增加足够的特异性。此外，在开发工具中检查元素可以向您展示应用于元素的 css - 即使它已被覆盖。

标签： css angular sass

【解决方案1】：

Angular 默认使用模拟封装策略。这意味着如果我们想要覆盖父组件的样式，我们需要使用::ng-deep。

试试这个：

:host ::ng-deep .mat-form-field-infix {
       display: block;
       position: relative;
       flex: auto;
       min-width: 0;
       width: 180px;
 }

【讨论】：