垫形字段的第一格的替代样式

Question

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

背景

我有一大堆领域的一个<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文件中的解决方案。

Answer 1

试试这个 ::ng-deep

html

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

component.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 { ... }

Answer 2

使用::ng-deepor/deep/对我来说不是解决方案，因为它很快就会被弃用。

ViewEncapsulation.None 对我来说也不是一个好的解决方案，因为它在使用时往往会破坏其他几种组件样式。

您可以no-padding向全局样式表添加自定义样式（例如）。

//example:
mat-form-field.no-padding .mat-form-field-wrapper {
    padding: 0;
}

然后根据需要将其应用到您的Material UI 表单字段。

//example:
<mat-form-field class="no-padding">
    <mat-label>First Name</mat-label>
    <input matInput placeholder="First Name">
</mat-form-field>