Material 2 对话框更改样式

Question

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

在我的 main.scss 中，我正在导入预构建的粉色-蓝灰色主题... 然后在我的组件中导入以下内容-->

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

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

谢谢

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

编辑 警告

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

EDIT2 不错的选择

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

在您的 mydialog.component.scss 文件中

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

在你的 style.scss 中

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

@include myPanel();

Answer 2

我通过在文件 ma​​terial2-app-theme.scss

的末尾包含这个 css 块解决了这个问题

.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;
  }