更改覆盖容器的样式 [英] 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-material的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;

}

但我无法从我的 angular 应用程序中覆盖这些.有什么建议吗?

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 */
}

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

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屋！