javascript - 如何独立设置输入元素的样式

Question

我正在为一个特定的表单域设置样式，但该样式似乎并不适用。我正在使用 Angular 7。

这是我的表格:

<ul>
  <li>
    <mat-form-field *ngIf="number">
      <input matInput disabled [value]="number">
    </mat-form-field>
    <mat-form-field *ngIf="name">
      <input name="address" matInput disabled [value]="building.name">
    </mat-form-field>
  </li>
</ul>

我希望数字字段的宽度为 200 像素，名称字段占用剩余的可用空间。

CSS 文件:

.mat-form-field {
  display: inline-block;
  position: relative;
  text-align: left;
  width: 200px;
}

:host ::ng-deep input.mat-input-element[name=address] {
  width: 100%;
}

两个字段都占用 200px，name 字段值被夹在中间。它不会扩展到值的大小。

Answer 1

尝试:

:host /deep/{
  input.mat-input-element[name=address] {
   width: 100%;
  }
}

或

::ng-deep{
   input.mat-input-element[name=address] {
   width: 100%;
  }
}