改变覆盖容器的样式答案

【问题标题】：Changing style of overlay container改变覆盖容器的样式
【发布时间】：2018-01-18 11:48:27
【问题描述】：

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

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

现在我必须找到合适的位置来改变来源。

将使用angular2-material中的overlay组件来可视化键盘。

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

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

}

但我无法从我的 Angular 应用程序中覆盖这些内容。有什么建议吗？

Screenshot of changes

【问题讨论】：

标签： angular angular-material angular-material2 angular-cdk

【解决方案1】：

覆盖 cdk-overlay-containeris 不好，因为它会影响所有其他组件。您可以创建自定义OverlayContainer。见example。

【讨论】：

【解决方案2】：

我发现通过使用主/默认“Styles.css”。 CDK（以及材质和动画）的样式更改已正确获取。（警告）我正在使用 Angular 4。

【讨论】：

【解决方案3】：

我自己通过使用两个样式表一个Global 和另一个component's 样式表来整理它，在全局中我将z-index 设置为较低的值（1000），以便它落后于header 和popup 组件样式表我使用!important 将其设置为高值（2000），以便标题位于我的覆盖层后面。

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

稍后谢谢我

【讨论】：

【解决方案4】：

如果你想改变 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
 }

【讨论】：

【解决方案5】：

更新答案

来自官方文档：

样式化叠加组件

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

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

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

之后，您需要将您的 css 类作为 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;
}

【讨论】：

值得注意的是 ::ng-deep 已被弃用 - 但我找不到有关时间表或替代方案的说明
::ng-deep 不会停留在孤立的范围内，它也会影响其他视图
如果我需要分别为 mat-menu 和 mat-dialog 设置 .cdk-overlay-container 的 z-index 怎么办。因为我在我的网站上固定了标题

【解决方案6】：

为了能够覆盖组件样式中的 Material CSS 类，您需要在组件上将 View Encapsulation 设置为 None：

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.scss'], //or .css, depending what you use
    encapsulation: ViewEncapsulation.None,
})

【讨论】：