MatDialog：无论内容大小如何控制整体大小

Question

使用 MatBlazor (1.5.4) MatDialog，我有兴趣将对话框大小固定或设置为总页面的百分比。当前，行为是对话框以其适合内容的大小打开。

我尝试在对话框定义的不同部分添加显式样式，但没有成功。

<MatDialog @bind-IsOpen="@IsDialogOpen" Style="width: 600px; height:600px">
    <MatDialogTitle>Some title</MatDialogTitle>
    <MatDialogContent Style="width: 600px; height:600px">This is the content</MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@(() => this.IsDialogOpen = false)" Icon="close">Close</MatButton>
    </MatDialogActions>
</MatDialog>

@code
{
    private bool IsDialogOpen { get; set; }
}

似乎没有明确的机制集成到MatDialog组件中，因此我猜需要明确的样式/CSS。

控制对话框大小的正确方法是什么？

Answer 1

默认情况下，表面对话框会增长以适应最大宽度为 560 像素的内容。

@media (min-width: 592px) {
    .mdc-dialog .mdc-dialog__surface { max-width: 560px; }
}

您应该能够使用自己的 css 文件覆盖它，该文件在 MatBlazor 删除 max-width 并设置宽度值后加载。如果您想占总屏幕的百分比，您还需要将容器设置为 100% 宽度。

.mdc-dialog .mdc-dialog__container { width: 100%;}
.mdc-dialog .mdc-dialog__surface {
    max-width: none;
    width: 70%;
}