问题描述
我将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 panelClassproperty (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;
}
这篇关于更改叠加层容器的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!