Question

我正在尝试更改md对话框的样式。

在我的main.scss中，我正在导入prebuild pink-bluegrey主题... 然后在我的组件中导入以下 - ＆gt;

@import "@angular/material/dialog/dialog.scss";

$mat-dialog-padding: 0;
$mat-dialog-border-radius: 0.5rem;
$background: #ffffff;

@mixin mat-dialog-container {
    padding: $mat-dialog-padding;
    border-radius: $mat-dialog-border-radius;
    background: $background;
}

@include mat-dialog-container;

填充和边框半径正确应用于对话框窗口。但背景不起作用......也试过了！重要声明。

我在一个组件中使用它... 全局是否也应用这些样式？

在chrome dev工具中我看到了那些应用的样式更改。粉红色 - 蓝色主题背景会覆盖背景。

希望任何人都可以提供帮助。

感谢

Answer 1

最好在对话框周围添加包装类，然后为子项添加样式。 Have a look at this article了解更多信息。

当您打开Angular对话框时，可以添加panelClass 属性，像这样：

this.dialog.open(MyDialogComponent, {panelClass: 'my-panel'})。

然后，在你的css中（例如在根styles.css文件中），你可以添加以下内容：

.my-panel .mat-dialog-container {
    overflow: hidden;
    border-radius: 5px;
    padding: 5px;
}

Answer 2

我通过在文件末尾包含此css块解决了这个问题 material2-app-theme.scss

.mat-dialog-container {
    overflow: hidden !important;
    border-radius: 5px !important;
    padding: 5px !important;
}

Answer 3

您可以使用css然后在mat dilog中更改背景吗，我使用的是透明色

 mat-dialog-container {
    padding: 0px !important;
    background: transparent !important;
  }

材质2对话框更改样式

3 个答案: