css - 角度材料对话框面板类不会更新
问题描述
我正在使用 Angular Material 对话框,并且正在尝试将背景设置为自定义颜色。
这个问题已经被问了好几次了,我试图应用答案,但它似乎不起作用。panelClass
具体来说,对话框容器的似乎没有更新。下面是打开对话框的组件、_theming.scss 文件和 HTML 元素
import { Component, OnInit} from '@angular/core';
import { AuthService } from 'src/app/AuthenticationPackage/core/auth.service'
import { MatDialog, MatDialogConfig } from '@angular/material';
import { FactiondialogComponent } from './factiondialog/factiondialog.component';
@Component({
selector: 'app-factions2',
templateUrl: './factions2.component.html',
styleUrls: ['./factions2.component.scss']
})
export class Factions2Component implements OnInit {
constructor( public authService: AuthService,
public dialog: MatDialog ) { }
ngOnInit(){ }
openDialog(faction): void{
const dialogConfig = new MatDialogConfig()
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {faction};
dialogConfig.panelClass = ".faction-dialog";
const dialogRef = this.dialog.open(FactiondialogComponent, dialogConfig)
dialogRef.afterClosed().subscribe(result => {
console.log("dialog closed");
});
}
}
_theming.scss 部分:
@mixin mat-dialog-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.faction-dialog{
background-color:rgb(28, 31, 32)
}
.mat-dialog-container {
@include _mat-theme-elevation(24, $theme);
background: mat-color($background, dialog);
color: mat-color($foreground, text);
}
}
@mixin mat-dialog-typography($config) {
.mat-dialog-title {
@include mat-typography-level-to-styles($config, title);
}
}
这是生成的标记,但不包括我的自定义类。
<mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c12-2 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-0" role="dialog" style="transform: none;"><!--bindings={
"ng-reflect-portal": ""
}--><app-factiondialog _nghost-lda-c13="" class="ng-star-inserted"><div _ngcontent-lda-c13="" class="dialogCard"><h2 _ngcontent-lda-c13="" class="mat-dialog-title">The Harpers</h2><mat-dialog-content _ngcontent-lda-c13="" class="mat-typography mat-dialog-content"><p _ngcontent-lda-c13="">
SOME CONTENT THAT DOESNT MATTER TO THE EXAMPLE
</p></mat-dialog-content><mat-dialog-actions _ngcontent-lda-c13="" align="end" class="mat-dialog-actions"><button _ngcontent-lda-c13="" mat-button="" mat-dialog-close="" class="mat-button mat-button-base" ng-reflect-dialog-result="" type="button"><span class="mat-button-wrapper">Close</span><div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div></button></mat-dialog-actions></div></app-factiondialog></mat-dialog-container>
我相信上半部分应该说:
<mat-dialog-container aria-modal="true" class="mat-dialog-container faction-dialog ng-tns-c12-2 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-0" role="dialog" style="transform: none;">
但我不确定,因为我还没有让它工作。我遵循了文档:
https://material.angular.io/components/dialog/api#MatDialogConfig
我不确定是否需要在我的应用程序模块或其他地方添加一些东西。
根据汗先生的要求:
派系2.component.ts:
openDialog(faction): void{
const dialogRef = this.dialog.open(FactiondialogComponent, {panelClass: 'faction-dialog'})
dialogRef.afterClosed().subscribe(result => {
console.log("dialog closed");
});
}
HTML 检查元素
<mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c12-4 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-2" role="dialog" style="transform: none;"><!--bindings={
"ng-reflect-portal": ""
}--><app-factiondialog _nghost-yis-c13="" class="ng-star-inserted"><div _ngcontent-yis-c13="" class="dialogCard"><h2 _ngcontent-yis-c13="" class="mat-dialog-title"></h2><mat-dialog-content _ngcontent-yis-c13="" class="mat-typography mat-dialog-content"><p _ngcontent-yis-c13=""></p></mat-dialog-content><mat-dialog-actions _ngcontent-yis-c13="" align="end" class="mat-dialog-actions"><button _ngcontent-yis-c13="" mat-button="" mat-dialog-close="" class="mat-button mat-button-base" ng-reflect-dialog-result=""><span class="mat-button-wrapper">Close</span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button></mat-dialog-actions></div></app-factiondialog></mat-dialog-container>
解决方案
如果您想添加自己的自定义类来设置材质模态的样式,那么首先通过panelClass
这种方式将您的自定义类传递给模态中的键:
this.dialogRef = this.dialog.open(AddCustomComponent,{
panelClass: 'custom-dialog-container', //======> pass your class name
});
this.dialogRef.afterClosed();
一旦完成,您所要做的就是使用您的类来设置您的模态样式,而其他模型不会受到影响。例如,您可以通过这种方式删除填充和边距。
/*Material Dialog Custom Css*/
.custom-dialog-container .mat-dialog-container{
padding: 0;
}
.custom-dialog-container .mat-dialog-container .mat-dialog-content{
margin: 0;
}
/*---------------------------*/
推荐阅读
- android - 如何删除由日历设置的通知?
- database - 天蓝色数据仓库中的死锁错误
- python - tensorflow-gpu 1.8.0 ImportError:libcudnn.so.7:无法打开共享对象文件:没有这样的文件或目录
- python-3.x - setuptools,在本地系统上使用包而不是从 PyPI 获取它
- jenkins - 詹金斯与 msbuild
- python - Python根据字典值降序的第一个元素打印字典
- sql - 相当于 hive collect_set 函数的 oracle
- kubernetes - 我应该如何使用 gRPC 将 RPC 发送到 Kubernetes 容器?
- c# - c# select查询中发生oledb异常数据类型不匹配
- multidimensional-array - 如何在 Perl 6 中对形状数组进行切片?