Почему не включен файл SCSS моего компонента mdDialog?

Question

У меня есть довольно простой компонент диалога Angular Material, который доставляет сообщения пользователю:

...

        let dialogRef = this.dialog.open(
            UserMessagingDialog,
            {
                data: {
                    'messages': this.messagesToShow,
                    'messageColors': this.messageColors,
                    'messageIcons': this.messageIcons
                },
                hasBackdrop: false,
                panelClass: 'messaging-panel'
            }
        );

        dialogRef.afterClosed().subscribe(result => {
            // angular.element('messaging .messaging-icon').removeClass('rotate-cw tinted');
        });
    }
}

@Component({
    selector: 'user-messaging-dialog',
    templateUrl: './user-messaging.dialog.html',
    styleUrls: ['./user-messaging.component.scss']
})
export class UserMessagingDialog {
    constructor(
        @Inject(MD_DIALOG_DATA)

        public data: any,
        public dialogRef: MdDialogRef<UserMessagingDialog>
    ) { }
}

Я пытаюсь стилизовать внутренние панели инструментов, поэтому я включил файл SCSS родительского компонента, как показано выше. Тем не менее, он не применяется. Сборка осуществляется через Webpack/Angular-CLI.

Файл SCSS содержит простой CSS и правильно включен в компонент, который вызывает диалог по тому же пути:

.messaging-panel .message-text {
    padding-top: 2px;
    padding-left: 8px;
    white-space: normal;
}
/* ... plus about 80 more lines */

Я также пытался разбить стили диалога на их собственный файл и напрямую вводить стили с помощью styles на компоненте.

Принимает ли диалог файл CSS, и если да, то почему он не работает для меня?

Answer 1

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

Используйте /deep/ selector, чтобы принудительно перенести стиль через дерево дочерних компонентов во все представления дочерних компонентов. Селектор / deep / работает с любой глубиной вложенности компонентов и применяется как к дочерним элементам представления, так и к дочерним элементам содержимого компонента.

поэтому для нацеливания всех его дочерних элементов в DOM с хоста, который мы должны использовать,

  :host /deep/ <selector>{}

Пример Плункер.

Подробнее об этом читайте здесь.

Answer 2

Оказывается, что таблица стилей загружалась, но стили были ограничены селекторами атрибутов таким образом, что это сломало мои потомки.

Например, .messaging-panel .message-text станет .messaging-panel[some_other_attr_id] .message-text[some_attr_id], Проблема в том, что родительский селектор имеет другой атрибут области видимости, который нарушает правило стиля.

Моим решением было удалить родительские селекторы в этих случаях.

ОБНОВЛЕНИЕ: Мадху Ранджан предоставил более подходящее решение.