По умолчанию angular помещает CSS / SCSS компонента в компонент , используя специальный селектор атрибутов, который автоматически создает Angular. Это означает, что стили компонента влияют только на элементы DOM в представлении этого компонента. Иными словами, стили компонента влияют только на элементы DOM, которые являются дочерними компонента.
mat-select отображает область наложения, используя пакет наложения CDK (который, я думаю, использует сам портал CDK ). Пакет наложения CDK отображает область наложения mat-select за пределами корневого компонента вашего приложения Angular (добавляется в документ body) . Это означает, что, несмотря на то, что mat-select находится внутри шаблона вашего компонента, и несмотря на то, что элемент mat-select является дочерним элементом вашего компонента в DOM, область наложения mat-select НЕ является дочерним элементом вашего компонента в DOM. Это означает, что стиль вашего компонента не будет касаться области наложения (или любых других элементов, которые не являются дочерними элементами вашего компонента).
Я столкнулся с этим вопросом перед собой. Лично я считаю это поведение ошибкой в эмулированной CSS области видимости Angular. Тем не менее, угловая команда знает об этой проблеме и рассматривает ее как приемлемое ограничение их реализации. Мне кажется, я помню комментарий одного из сопровождающих Angular о том, что в настоящее время они не знают, как исправить эту проблему качественно (поэтому я не думаю, что это когда-либо изменится). Точно так же встроенная теневая DOM-инкапсуляция позволяет ТОЛЬКО CSS-компоненту влиять на дочерние элементы компонента, поэтому при рендеринге накладываются те же проблемы (я думаю, что спецификация приняла это решение и по соображениям производительности).
Все это говорит о том, что есть два способа, которыми вы можете поместить CSS в CSS-файл вашего компонента и по-прежнему заставить его работать (вместо того, чтобы помещать CSS в «глобальный» CSS-файл).
- Отключите определение CSS для компонента с помощью опции
@Component({encapsulation: ViewEncapsulation.None}). Это отключает определение CSS для компонента, что делает все css компонента "глобальными". В отличие от обычного «глобального» css, css компонента добавляется и удаляется из DOM, когда компонент создается / уничтожается (поэтому css компонента будет находиться в DOM только в том случае, если компонент).
- Если вы выберете эту опцию, вы все равно сможете вручную добавить отдельные стили к компоненту, используя селектор элемента компонента.
Установите для css scoping компонента значение ViewEncapsulation.Emulated (по умолчанию) и используйте angular custom ::ng-deep псевдоселектор , чтобы выборочно удалить область действия из определенных стилей css в файле css компонента .
Пример:
::ng-deep { .cdk-global-overlay-wrapper, .cdk-overlay-container { z-index: 9999!important; } }
- Селектор
::ng-deep устарел в угловом режиме, но команда разработчиков угловых планов в настоящее время не планирует снимать селектор, и они по-прежнему рекомендуют использовать его, если необходимо, на данный момент.
ViewEncapsulation.Native и ViewEncapsulation.ShadowDom не поддерживают селектор ::ng-deep (и не поддерживают проколотые селекторы).