Question

我正在尝试自定义默认＆＃34; mat-dialog＆＃34;在Angular 5。我想要实现的是在对话框的上半部分有一个工具栏，它应该覆盖整个宽度。但是，mat-dialog-container有一个24px的固定填充，我无法覆盖。我试着设置h1和mat-dialog-container的样式。

@Component({
selector: 'error-dialog',
template: 
` <h1 mat-dialog-title> ERRORE </h1>             
    <div mat-dialog-content>
        {{data.error}}
    </div>
    <div mat-dialog-actions>
        <button mat-button (click)="onClick()">Ok</button> 
    </div>`,
styles: [
'h1 { background: #E60000; color: white; }',
// 'myDialogStyle .mat-dialog-container { padding: 1px !important;}'
]})

export class ErrorDialog {
constructor(
public dialogRef: MatDialogRef<ErrorDialog>,
@Inject(MAT_DIALOG_DATA) public data: any) { }

onClick(): void {
this.dialogRef.close();
 }
}

openErrorDialog(errore: string): void{
    let dialogRef = this.dialog.open(ErrorDialog, {
        width: '80%',
        data: { error: errore }
        //panelClass: 'myDialogStyle'
    });
}

Answer 1

您可以在matDialogConfig对象中传递自定义panelClass（doc here）

所以

openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
    width: '80%',
    data: { error: errore }
    panelClass: 'custom-modalbox'
});

}

在您的自定义panelClass中，您可以覆盖填充：

.custom-modalbox {
    mat-dialog-container {
        padding: 0;
    }
}

但是你的.custom-modalbox应该是全局作用域（未在组件样式中定义）

Answer 2

这肯定会起作用：

::ng-deep.mat-dialog-container {
    padding: 0px !important;
}

Answer 3

panelClass在样式处于全局范围内时效果很好，否则将无法使用，因为样式不可用。

在样式之前添加ng-deep即可全局访问它！

::ng-deep {

 .custom-dialog > mat-dialog-container {
        padding: 0px;
    }

}

Answer 4

我只是更改了它，所以效果很好：

# import projectLib
library(projectLib)
project <- projectLib::Project$new(projectId="secret, projectToken="secret")

# get the file size:
csv.size = file.size('example.csv')

# read the file as a byte array
bytes.to.save = readBin('example.csv', 'raw', n = csv.size, size = NA_integer_, 
        signed = TRUE, endian = .Platform$endian)

# save the file to cloud object storage
project$save_data("example.csv", bytes.to.save, overwrite = TRUE)

这里有一个可行的例子： https://stackblitz.com/edit/custom-dialog?file=src/styles.css

Answer 5

您应该在组件上与:: ng-deep在CSS上同时使用panelClass。

openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
    width: '80%',
    data: { error: errore }
    panelClass: 'custom-modalbox'
});
}

在CSS中：

::ng-deep .custom-modalbox {
mat-dialog-container {
    padding: 0;
}
}

Answer 6

解决方案的最佳方法是仅在单个位置更改代码。可以使用以下代码完成此操作：

::ng-deep.mat-dialog-container {
overflow: visible;
}

这可以帮助您仅在单个位置更改代码，而不是在所有位置更改代码。这很完美。除了相应的CSS文件之外，无需声明其他任何内容。

Answer 7

遗憾的是，我们无法在 mat-dialog 配置中设置所有所需的样式。 MatDialogConfig 允许您在配置中仅设置宽度、高度、最大/最小宽度、最大/最小高度和自定义类，以便由它们对某些特定选项进行操作。但您也可以在 styles.scss 文件中为模态设置全局样式。 *.ts

let dialogRef = this.matDialog.open(
   SomeEntryComponent, 
   <MatDialogConfig>modalConfig // <- there you can set width/height
);
    dialogRef.afterClosed().subscribe((result: any) => { /* do stuff */ });

全局样式.scss

.cdk-overlay-pane mat-dialog-container.mat-dialog-container { // <- in this way all other styles
  margin: 20px 5px;
  padding: 30px;
}

角度自定义样式到mat-dialog

7 个答案: