在SCSS中重写<style>类而不使用！在角中很重要

Question

我在一个角组件中有以下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 "test“，我希望宽度扩展到220‘d，而不必将!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;
}

我能做什么?

Answer 1

角在默认情况下使用仿真封装策略。这意味着如果我们想要覆盖父组件的样式，我们需要使用*五深。

尝试如下：

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