覆盖 mat-form-field 的第一个 div 的样式

Question

如何覆盖 <mat-form-field> 生成的第一个 div 上的 CSS？

背景

我在 <mat-card> 中有一堆字段， 最后一个 字段导致卡片底部的填充过多。

 <mat-form-field id="this-feels-hacky-and-wrong"...>
    <!-- I want to remove the padding-bottom from this element -->
    <div class="mat-input-wrapper mat-form-field-wrapper">
      ...
    </div>
</mat-form-field>

在我的 stlye.css 我放

#this-feels-hacky-and-wrong div{
  padding-bottom: 0;
}

这行得通，但必须有更好/正确的方法来做到这一点，不是吗？

我 更喜欢 我的 component.scss 文件中的解决方案。

原文由 spottedmahn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试使用这个 ::ng-deep

html

 <mat-form-field class="this-feels-better"...>

组件.scss

 :host ::ng-deep .this-feels-better div.mat-input-wrapper.mat-form-field-wrapper{
  padding-bottom: 0;
}

选择

如果您真的不想使用 ng-deep 因为它将来会被删除，并且您真的希望在您的 component.scss 文件中包含您的 css 规则，那么您可以更改组件的视图封装到 None

 import {ViewEncapsulation} from '@angular/core';

@Component({
   //...
   encapsulation: ViewEncapsulation.None
})

但是，在这种情况下，您需要确保为该组件中的所有 CSS 规则添加某种对该组件唯一的选择器的前缀，以防止规则泄漏到其他组件。

 .uniqueClassOnComponent .this-feels-better div.mat-input-wrapper.mat-form-field-wrapper{
   padding-bottom: 0;
}

//Other generic rules
.uniqueClassOnComponent span { ... }

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

试试这个。

HTML

 <div style="width: 100%" class="time-period-area">
  <mat-form-field class="no-padding" appearance="outline">
    <mat-label>Time Period</mat-label>
    <input matInput style="height: 0; width: 100%" value=" " />
    <div class="mat-input-wrapper mat-form-field-wrapper">
      ...
    </div>
  </mat-form-field>
</div>

css

 .time-period-area {
  mat-form-field.no-padding {
    width: 100%;
    padding: 0;
  }
}

原文由 FIDEL INDALECIO MAMANI 发布，翻译遵循 CC BY-SA 4.0 许可协议