Примените стиль css ко всем диалоговым окнам в моем приложении angular

Question

Я использую простой диалог по всему моему приложению angular. Я могу изменить каждый конкретный c стиль диалога, используя ng-deep. Например, у меня есть страница для связи с нами, для которой у меня есть эти файлы:

contact.html
contact.component.ts
contact.css

Таким образом, я помещаю ниже css в контакт. css, и это меняет цвет строки заголовка диалога с нами.

:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
    background-color: red
}

Я хочу сделать это для всех диалогов в моем приложении, как я могу это сделать? Я поместил тот же css в стиле. css файл в папку sr c, и он не работал.

Answer 1

Таким образом, angular компоненты по умолчанию используют очень удобную стратегию Style Encapsulation , которая делает так, чтобы стили не сливались с другими компонентами и не вызывали нежелательных эффектов.

You может использовать ng-deep, как если бы вы позволили стилям, определенным в нем, наследоваться дочерними компонентами того места, где он указан.

Однако для того, чтобы вещи наследовались глобально, вам нужно определить их наивысший в порядке в начале, так что эти стили каскад вниз к селекторам ниже. В приложении по умолчанию angular, которое не использует S CSS или другой препроцессор, один из самых простых способов сделать это - добавить их в один из первых инициализированных файлов, в котором размещены дочерние компоненты, такие как index.html или app.component, чтобы позволить компонентам, инициализированным впоследствии, наследовать их при визуализации.

Надеюсь, это поможет, ура!