Как использовать свойство Angular 7 Material `panelClass`?

Question

Angular 5 Material Snackbar panelClass config Это очень похожий вопрос только в том, что существует множество предположений, и я изо всех сил пытаюсь заставить все это работать в Angular 7.

API довольно прост.Укажите string | string[], который, я полагаю, является именем класса.

Но где вы определяете эти стили и каков их синтаксис?Есть ли стандартный метод?

Наивным предположением было бы поместить panelClass: ['my-class'] затем в styles.css

.my-class{
   text-align: center;
}

Но это не так просто.Особенно, когда я смотрю на ViewEncapsulation.Снэк-бары кажутся глобальными стилями, и я действительно не знаю технику, которая не нарушала бы стили с ограничениями.

ng-deep покидает нас, но они упоминают:

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

Я не видел, чтобы рекомендовалась ограниченная функция, и я не уверен, что будет в будущем.

Answer 1

DOM для компонентов, которые используют оверлей, такой как закусочные и диалоговые окна, не является потомком DOM для родительского компонента, который «запускает» оверлейный компонент.Поэтому из-за инкапсуляции пытаться стилизовать его из CSS / Sass родительского компонента бесполезно даже с глубокими селекторами.Таким образом, этот стиль - класс, указанный с помощью опции panelClass - должен существовать в глобальной таблице стилей.Итак, ваше «наивное предположение» верно - это так просто.