改变覆盖容器的样式

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;

}

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

Screenshot of changes

Answer 1

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

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

Answer 2

UPDATED ANSWER

来自官方文档：

Styling overlay components

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

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

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

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

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

阅读此 official documentation 了解更多信息。

ORIGINAL ANSWER

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

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

Answer 3

我发现通过使用 main/default "Styles.css"。 CDK（以及 Material 和动画）的样式更改被正确拾取。（注意）我正在使用 Angular 4 .

Answer 4

如果你想改变 mat-dialogue-container 的样式添加一个面板 class 并给出样式就足够了，但如果你想改变 cdk-overlay-container 的样式然后添加backdropClass 会有所帮助

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

在css中添加

.popupBackdropClass {
   background-color:yellow
 }

Answer 5

我自己用两种风格整理出来sheet一种Global和另一种component's风格sheet,在全局我设置z-index到较低的值（1000），使其位于 header 之后，在 popup 组件样式 sheet 中，我将其设置为高值（2000） !important 以便 header 位于我的叠加层后面。

我就是这样解决的。

稍后谢谢我

Answer 6

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

改变覆盖容器的样式

Changing style of overlay container

angular-material

angular-material2

angular

angular-cdk