Material 2 对话框更改样式 [英] Material 2 dialog change style

问题描述

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

I'm trying to change the style of the md-dialog.

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

in my main.scss i'm importing the prebuild pink-bluegrey theme... then in my component I import the following -->

@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 声明.

The padding and border radius is correctly applied to the dialog window. But the background is not working... also tried the !important statement.

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

I'm using this in a single component... Is there also a change to apply those styles globally?

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

in chrome dev tools I see those applied style changes. The background gets overwritten by the pink-bluegrey theme..

希望大家帮忙.

谢谢

推荐答案

最好在对话框周围添加包装类，然后为子项添加样式.查看这篇文章了解更多信息.

It is better practice to add a wrapper class around your dialog, and then add styling to the children. Have a look at this article for more information.

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

When you open your Angular dialog, you can add a panelClass attribute, like this:

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

然后，在您的 css 中(例如在根 style.css 文件中)，您可以添加以下内容:

then, in your css (e.g. in the root styles.css file), you can add the following:

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

编辑 警告

也可以将 css 添加到另一个文件而不是根样式.css，但是你必须在 css 中使用 ::ng-deep(例如 ::ng-deep .my-panel{//... }).不建议这样做，因为 ::ng-deep 在 Angular 中 已弃用

It is also possible to add the css to another file than the root styles.css, but then you have to use ::ng-deep in the css (e.g. ::ng-deep .my-panel{ // ... }). This is not advised, as ::ng-deep is deprecated in Angular

EDIT2 不错的选择

如果您使用的是 scss，那么您可以使用 @mixin 将 .my-panel 样式放在 mydialog.component.scss 文件中，并且@importstyles.scss 中的文件.然后你可以使用 @include 来加载定义好的 mixin.

If you are using scss, then you can place your .my-panel-style in your mydialog.component.scss file, by using a @mixin, and @import the file in styles.scss. You can then use @include to load the defined mixin.

在你的 mydialog.component.scss 文件中

in your mydialog.component.scss file

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

在你的styles.scss中

in your styles.scss

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

@include myPanel();

这篇关于Material 2 对话框更改样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！