Стиль переопределения первого div поля mat-form-field

Question

Как я могу переопределить CSS в первом div, сгенерированном <mat-form-field>?

Фон

У меня есть кучаполя в <mat-card> и поле last вызывают слишком много заполнения в нижней части карты.

<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;
}

Alternative

Если вы действительно не хотите использовать ng-deep, потому что он будет удален в будущем, и вы действительно хотите, чтобы ваше правило css было в вашем файле component.scss, тогда вы можете изменить инкапсуляцию вида компонента на 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

С помощью CSS вы можете использовать n-й термин .Пока у div, который вы пытаетесь настроить, есть тот же родительский div, что и у других, вы можете ссылаться на первый и последний дочерний div следующим образом:
.my-div-class:first-child {}
и
.my-div-class:last-child {}

Итак, далее n-й член можно использовать для обозначения любого ребенка следующим образом:
.my-div.class:nth-child(2) {}
Это будет нацелено на второго ребенка.

Для дальнейшего разъяснения вашего вопроса, вот как должен выглядеть ваш CSS:

mat-form-field:last-child div {
   padding-bottom: 0;
}