angular - 改变覆盖容器的样式

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

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 类来覆盖默认对话框容器样式。例如:

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

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