Сгенерированные угловые атрибуты для определения области CSS не применяются к внутренним элементам компонентов

Question

Angular генерирует атрибуты и, по-видимому, применяет их только к элементам, которые вы объявили в своем шаблоне.Любые дополнительные элементы HTML, которые поставляются с компонентом (в моем случае, angular-material mat-form-field), не применяют этот атрибут.

Это задумано?Результатом этого является то, что нет никакого способа нацелиться на эти внутренние элементы, так как любые классы, которые вы определяете в файле CSS вашего компонента, объединяются с атрибутом Angular, генерируемым.

В моем случае,

.mat-form-field * {
  border-radius: 0;
}

Генерирует в:

mat-form-field[_ngcontent-c19] *[_ngcontent-c19] {
  border-radius: 0;
}

Моя цель - стилизовать некоторые из множества элементов HTML, из которых состоит <mat-form-field>.

Есть ли способ добиться этого отв файлах моего компонента (без обращения к таблице стилей для всего сайта)?

Answer 1

Вы должны использовать :: ng-deep вместо / deep /, что выглядит устаревшим.

mat-form-field ::ng-deep *

По документации:

Проникающий теневой комбинатор потомковустарела, и поддержка удаляется из основных браузеров и инструментов.Таким образом, мы планируем отказаться от поддержки в Angular (для всех 3 of / deep /, >>> и :: ng-deep).До тех пор :: ng-deep следует предпочитать для более широкой совместимости с инструментами.

Вы можете найти его здесь