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

问题描述

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

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

在我的main.scss中，我导入了prebuild pink-bluegrey主题...然后在我的组件中导入以下->

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

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

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

hope anyone can help.

谢谢

推荐答案

更好的做法是在对话框周围添加包装类，然后为子级添加样式.查看本文以获取更多信息.

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(例如，在根styles.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添加到除根styles.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文件中.在styles.scss中 @import 文件.然后，您可以使用 @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();

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