Почему я не могу стилизовать элементы угловых материалов напрямую?

Question

Вот пример кода, который я разветвлял из официальной угловой документации для степпера: https://stackblitz.com/edit/angular-tth817

В моем форке я пытаюсьдобиться нескольких вещей:

• Я хочу скрыть шаговый заголовок.

  • Я пытался сделать это с помощью стиля .mat-horizontal-stepper-header-container (на самом деле, просто добавив к нему границу).

• Я заставил содержимое последнего шага быть высоким.Там вы можете видеть, что кнопки на каждом шаге больше не совпадают.То, что я хотел бы сделать - это заполнить родительский элемент степпером (.container, жирная красная пунктирная линия), а затем я могу использовать flex box, чтобы все кнопки были выровнены снизу.

  • Я добавил mat-stepper-horizontal, mat-stepper-horizontal правил, и они тоже не применяются.

Можете ли вы сказать мне:

• Почему эти правила вообще не появляются?(Инструменты разработчика F12, показывает все другие правила, но не те, которые относятся к конкретным шагам).Что тут происходит?

• Вообще - какую философию я должен использовать для стилизации степпера?Лучшая альтернатива, которую я могу придумать, - это помещать содержимое div внутри каждого шага и изменять его с помощью vh и vw или чего-то еще.

• Как бы я избавился от заголовка?

Answer 1

Из угловых документов:

Стили, указанные в метаданных @Component, применяются только внутри шаблона этого компонента.

(https://angular.io/guide/component-styles#style-scope)

Другими словами, добавление стиля в этот файл не повлияет на дочерние компоненты.

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

::ng-deep .mat-horizontal-stepper-header-container {
  border: solid 1px red; 
}

::ng-deep mat-stepper-horizontal, mat-stepper-horizontal {
  border: dashed 1px blue; 
  padding: 1em;
}