Angular 更改覆盖容器的样式

我将git项目用于虚拟键盘（）。在450*250像素的小型设备上运行时，我遇到了一些问题

最后，如果我使用dev工具直接在web浏览器中修改css，我发现了必要的更改

现在我必须找到正确的位置来改变来源

将使用angular2材质中的叠加组件来可视化键盘

如果我注释掉cdk覆盖容器中的位置，它会起作用：

.cdk-overlay-container {
/* position: fixed; */
z-index: 1000;

}

但我无法从我的角度应用程序覆盖这些。 有什么建议吗

---

为了能够覆盖组件样式中的材质CSS类，您需要在组件上将设置为“无”：

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.scss'], //or .css, depending what you use
    encapsulation: ViewEncapsulation.None,
})

更新的答案

从官方文件：

设置覆盖组件的样式

基于覆盖的组件有一个panelClass 属性（或类似属性），可用于定位覆盖窗格

通过在全局

样式中添加css类，可以覆盖默认的对话框容器样式。例如：

.custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

之后，您需要将css类作为
panelClass参数提供给对话框：

this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

更多信息请阅读本文


原始答案

在component.css中使用
：：ng deep
，以覆盖默认样式

::ng-deep .cdk-overlay-container {
    /* Do you changes here */
    position: fixed; 
    z-index: 1000;
}

我发现通过使用main/default“Styles.css”。CDK的样式更改（以及材质和动画）已正确拾取。（注意）我使用的是Angular 4。
如果您想更改mat dialogue容器的样式，添加一个panel类并提供样式就足够了，但如果您想更改cdk overlay容器的样式，则添加backdropClass将有所帮助

const dialogRef = this.dialog.open(PopupComponent, {
  backdropClass: 'popupBackdropClass',
  panelClass: 'custom-dialog-container',
  data: { data: data }
});

在css中添加

.popupBackdropClass {
   background-color:yellow
 }

我自己用两个样式表来分类，一个是
Global
，另一个是
组件的
样式表，在Global中，我将
z-index
设置为较低的值（
1000
），使其位于
标题后面，在
弹出的
组件样式表中，我用
将其设置为高值（
2000
）！重要信息
，以便标题位于我的覆盖后面

我就是这样设法解决的

稍后感谢我
值得注意的是：：ng deep已被弃用-但我找不到关于时间范围或备选方案的说明：：ng deep不在单独的范围内，它会影响其他视图。如果我需要分别为mat菜单和mat对话框设置.cdk覆盖容器的z索引，该怎么办。因为我在我的网站上有固定的标题