Material 2 对话框更改样式

Question

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

在我的 main.scss 中，我正在导入 prebuild pink-bluegrey 主题……然后在我的组件中，我导入以下内容–>

 @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;

填充和边框半径正确应用于对话窗口。但是背景不工作……也尝试了 !important 声明。

我在单个组件中使用它…是否也有更改以全局应用这些样式？

在 chrome 开发工具中，我看到了那些应用的样式更改。背景被粉蓝灰色主题覆盖。

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

谢谢

原文由 jonny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最好在对话框周围添加一个包装类，然后为子项添加样式。 请查看这篇文章 以获取更多信息。

当您打开 Angular 对话框时，您可以添加一个 panelClass 属性，如下所示：

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

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

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

编辑 警告

也可以将 css 添加到根 style.css 之外的另一个文件中，但是您必须在 css 中使用 ::ng-deep （例如 ::ng-deep .my-panel{ // ... } ）。不建议这样做，因为 ::ng-deep 在 Angular 中已弃用

EDIT2 不错的选择

如果您使用的是 scss，那么您可以使用 @mixin 和 @import 文件将您的 .my-panel -style 放在 mydialog.component.scss 文件中在styles.scss 中。然后，您可以使用 @include 加载定义的 mixin。

在您的 mydialog.component.scss 文件中

@mixin myPanel(){
 .my-panel .mat-dialog-container {
   // css here
 }
}

在你的styles.scss

 @import 'path/to/mydialog.component.scss' // you don't need the .scss suffix

@include myPanel();

原文由 John 发布，翻译遵循 CC BY-SA 4.0 许可协议