18

我将 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;

}

但我不能从我的角度应用程序中覆盖这些。有什么建议么？

更改截图

4

6 回答 6

33

更新的答案

来自官方文档：

样式化覆盖组件

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

您可以通过在全局styles.css. 例如：

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

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

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

阅读此官方文档以获取更多信息。

原始答案

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

::ng-deep .cdk-overlay-container {
    /* Do you changes here */
    position: fixed; 
    z-index: 1000;
}
于 2017-08-10T15:11:03.150 回答
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
 }
于 2019-09-24T10:55:52.397 回答
3

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

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.scss'], //or .css, depending what you use
    encapsulation: ViewEncapsulation.None,
})
于 2017-08-10T12:46:51.893 回答
0

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

于 2021-12-06T13:24:58.800 回答
0

我自己通过使用两个样式表Global和另一个component's样式表对其进行排序，在全局中，我设置z-index为较低的 value( 1000)，以便它位于组件样式表的后面，header而在popup组件样式表中，我将其设置为 high value( 2000)，!important以便标题位于我的后面覆盖。

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

晚点再谢我

于 2019-10-17T06:58:39.537 回答
0

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

于 2017-10-31T01:53:29.427 回答