Blazor服务端中如何调整Ignite UI的IgbDialog尺寸？

我在Blazor服务端项目中使用Ignite UI组件，尝试直接给IgbDialog添加Width和Height属性调整弹窗尺寸，但设置后完全没效果。附上相关代码，求解决办法。

相关代码 #

<div class="container vertical">
    <IgbButton @onclick="OnDialogShow" Variant=@ButtonVariant.Contained>Show Dialog</IgbButton>
    <IgbDialog @ref="DialogRef" Title="Confirmation" Width="500px" Height="800px"> 
        <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
        <IgbButton slot="footer" @onclick="OnDialogHide" Variant=@ButtonVariant.Flat>Cancel</IgbButton>
        <IgbButton slot="footer" @onclick="OnDialogHide" Variant=@ButtonVariant.Flat>OK</IgbButton>
    </IgbDialog>
</div>

解决方法 #

Ignite UI Blazor的IgbDialog默认不支持直接通过Width/Height属性设置尺寸，需要通过CSS自定义样式实现：

• 添加自定义CSS类
  给IgbDialog指定一个自定义类名，比如custom-dialog：

  <IgbDialog @ref="DialogRef" Title="Confirmation" Class="custom-dialog">
  

• 编写全局CSS样式
  在项目全局CSS文件（如wwwroot/css/app.css）中添加以下样式：

  .custom-dialog {
      --width: 500px;
      --height: 800px;
  }
  

  也可以直接针对弹窗内容区域精准调整：

  .custom-dialog ::part(content) {
      width: 500px;
      height: 800px;
  }
  

• 动态调整尺寸（可选）
  如果需要在代码中动态修改尺寸，可通过组件引用更新CSS变量：

  private IgbDialog? DialogRef;
  
  private void OnDialogShow()
  {
      DialogRef?.Style.SetProperty("--width", "600px");
      DialogRef?.Style.SetProperty("--height", "900px");
      DialogRef?.Show();
  }
  

原理：Ignite UI的Web组件依赖CSS变量和Shadow DOM控制样式，直接设置HTML属性无法覆盖默认规则，必须通过CSS变量或Shadow DOM的::part选择器定制。

内容的提问来源于stack exchange，提问作者thedarkknight