更改叠加容器的样式

Question

我使用git项目作为虚拟键盘(https://ngx-material-keyboard.github.io/demo/).我有一些问题要让它在450*250像素的小型设备上运行.

最后,如果我使用开发工具直接在Web浏览器上修改它,我会在css中找到必要的更改.

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

将使用angular2-material的overlay组件来显示键盘.

如果我在cdk-overlay-container中注释掉该位置,它的工作原理如下:

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

}

但我无法从我的角度应用中覆盖这些.有什么建议？

更改截图

Answer 1

更新的答案

从官方文档:

样式覆盖组件

基于叠加的组件具有panelClass属性(或类似属性),可用于定位覆盖窗格.

您可以通过在全局中添加css类来覆盖默认对话框容器样式styles.css.例如:

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

之后,您需要提供css class作为panelClass对话框的参数:

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

阅读此官方文档以获取更多信息.

原始答案

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

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