更改叠加层容器的样式 [英] Changing style of overlay container

问题描述

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

I use a git project for a virtual keyboard (https://ngx-material-keyboard.github.io/demo/). And I have some issues to get it running on a small device with 450*250 pixel.

最后，如果我直接使用开发工具在Web浏览器中对其进行修改，我发现在CSS中有必要的更改.

At the end I found the necessary changes in the css if I modify it directly at the web browser with dev tools.

现在我必须找到合适的位置来更改源.

Now I have to find the right position to change the sources.

将使用angular2材质的overlay组件来使键盘可视化.

There will be used the overlay component from angular2-material to visualize the keyboard.

如果我注释掉cdk-overlay-container中的位置，它将起作用:

If I comment out the position in the cdk-overlay-container, it works:

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

}

但是我无法从我的角度应用程序中覆盖这些内容. 有什么建议吗?

But I cant overwrite these from my angular application. Any suggestions?

更改的屏幕截图

推荐答案

更新后的答案

摘自官方文档:

样式叠加层组件

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

Overlay-based components have a panelClass property (or similar) that can be used to target the overlay pane.

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

You can override the default dialog container styles by adding a css class in your global styles.css. For example:

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

之后，您需要为对话框提供一个 panelClass 参数作为css类:

After that, you'll need to providies you css class as a panelClass parameter to your dialog:

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

阅读此 官方文档 > 了解更多信息.

Read this official documentation for more information.

原始答案

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

Use ::ng-deep in your component.css to override the default styles.

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

这篇关于更改叠加层容器的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！