Question

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

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

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

将使用angular2-material中的叠加组件来显示键盘。

如果我在cdk-overlay-container中注释掉它的位置，它可以工作：

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

}

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

Screenshot of changes

Answer 1

更新的答案

来自官方文件：

样式化叠加组件

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

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

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

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

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

阅读此official documentation以获取更多信息。

原始回答

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

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

Answer 2

我发现通过使用main / default“Styles.css”，可以正确选取CDK（以及材质和动画）的样式更改。（警告）我正在使用Angular 4。

Answer 3

如果您想更改mat-dialogue-container的样式，添加一个面板类并给出样式就足够了，但是如果您要更改cdk-overlay-container的样式，则添加一个backgroundClass会有所帮助

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

在CSS中添加

.popupBackdropClass {
   background-color:yellow
 }

Answer 4

我通过使用两个样式表（一个Global和另一个component's样式表）对自己进行排序，总体上，我将z-index设置为较低的值（1000），以便在header后面，在popup组件样式表中，我使用2000将其设置为高值（!important），以便标题在我的叠加层后面。

这就是我设法解决的方法。

稍后谢谢

更改叠加容器的样式

4 个答案: