Угловой материал - как установить отступы горизонтального содержимого контейнера

Question

Я использую угловой материал степпера. Мне нужно установить отступ 0 в мобильном представлении. На консоли разработчика я мог установить отступ 0, изменив .mat-horizontal-content-container. Но это не работает, когда я добавляю .mat-horizontal-content-container{padding:0 !important;} Есть ли какое-либо решение этой проблемы?

Answer 1

Вам необходимо использовать псевдо-селектор :: ng-deep, см. https://blog.angular -university.io / angular-host-context / # thengdeeppseudoclassselector

:host ::ng-deep .mat-horizontal-content-container {
    padding:0 !important;
}

Answer 2

Элементы материала не являются частью структуры HTML вашего компонента.

Для доступа к ним в вашем SCSS (CSS и т. Д.) Вы можете использовать ng-deep, то есть shadow-piercing descendant combinator, что дает вам доступ к HTMLэлементы, которые не являются частью вашей структуры компонентов.

нг-глубокий угловой документ

::ng-deep .mat-horizontal-content-container {padding:0 !important;}

НО Этокомбинатор устарел (как вы можете прочитать в документации).Есть еще один способ сделать то, что вы хотите, но он не совсем идеален.Это с использованием ViewEncapsulation

@Component({
  template: 'component.html',
  selector: 'app-component-name',
  styles: 'component.style.scss',
  encapsulation: ViewEncapsulation.None
})

Нет. Это означает, что Angular не выполняет инкапсуляцию вида.Angular добавляет CSS к глобальным стилям.Обсуждаемые ранее правила определения границ, изоляции и защиты не применяются.По сути, это то же самое, что и вставка стилей компонента в HTML.

Тем не менее, на данный момент, ::ng-deep должен быть подходящим способом в этих случаях, пока он не будет отброшен Angular.Потому что, как говорится в документе:

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