css - Material 2对话框更改样式

我正在尝试更改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开发工具中，我看到了那些应用的样式更改。背景被粉色-bluegrey主题覆盖。

希望任何人都能提供帮助。

谢谢

最佳答案

更好的做法是在对话框周围添加包装器类，然后为子代添加样式。 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;
}

编辑警告

也可以将css添加到除根styles.css之外的另一个文件中，但是随后您必须在css中使用::ng-deep(例如::ng-deep .my-panel{ // ... })。不建议这样做，因为::ng-deep是deprecated in Angular

EDIT2 不错的选择

如果使用的是scss，则可以通过使用.my-panel将@mixin -style放置在mydialog.component.scss文件中，并将@import放置在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();

关于css - Material 2对话框更改样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42455358/