我正在mat-select内显示ngx-smart-dialog，当我打开select时，它显示在对话框的后面。我找到了this和this的解决方案：
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 9999!important;
}
如果我将其放入全局.scss文件中，则可以解决此问题。我想知道的是（因为在我阅读的书中没有找到解释）为什么将其放在组件的视图（即模态组件的视图）中不起作用。
谢谢！
答案 0 :(得分：1)
默认情况下，angular scopes a component's CSS / SCSS to a component使用Angular自动创建的特殊属性选择器。这意味着组件样式仅影响该组件视图中的DOM元素。换句话说，组件的样式仅影响作为组件的子代的DOM元素。
mat-select使用CDK overlay package（我认为使用CDK portal本身）渲染覆盖窗格。 CDK覆盖软件包renders the mat-select's overlay pane outside of your Angular application's root component (appended to the document body)。这意味着，尽管mat-select是组件模板内的元素，并且尽管mat-select元素是DOM中组件的子元素，但是mat-select的覆盖窗格不是组件的子元素在DOM中。这意味着您组件的样式不会触摸覆盖窗格（或不是您组件的子元素的任何其他元素）。
我自己遇到了这个问题。我个人认为，此行为是Angular的模拟 css范围定义功能中的错误。但是，专职团队已意识到该问题，并将其视为其实施的可接受限制。我想我记得我曾听过一位Angular维护者的评论，说他们目前不知道以一种有效的方式解决此问题的方法（因此，我认为这不会改变）。同样，本机阴影DOM封装仅允许组件的CSS影响组件的子组件，因此在渲染叠加层时也会引起相同的问题（我相信规范也是出于性能原因做出此决定）。
总而言之，有两种方法可以将css放置在组件的css文件css文件中，并且仍然可以使事情工作（而不是将css放置在“全局” css文件中）。
@Component({encapsulation: ViewEncapsulation.None}) option.这将禁用组件的CSS作用域，使组件的所有CSS“全局”。与普通的“全局” css不同，在创建/销毁组件时会在DOM中添加和删除组件的css（因此，如果组件存在，则组件的css将仅位于DOM中）。
将组件的css范围设置为ViewEncapsulation.Emulated（这是默认设置），然后使用angular custom ::ng-deep pseudo selector从组件的css文件中的某些css样式中有选择地删除范围。
示例：
::ng-deep { .cdk-global-overlay-wrapper, .cdk-overlay-container { z-index: 9999!important; } }
::ng-deep选择器在角度上已弃用，但是角度小组目前尚无删除选择器的计划，他们仍然建议您暂时使用它（如果需要）。ViewEncapsulation.Native和ViewEncapsulation.ShadowDom不支持::ng-deep选择器（并且不支持任何穿孔选择器）。