如何设置MudBlazor DataGrid的列宽？

核心原因 #

MudBlazor DataGrid的默认表格布局样式优先级较高，直接通过CellClass、HeaderClass、CellStyle、HeaderStyle设置宽度时，容易被组件内置样式覆盖，导致不生效。

可行解决方案 #

• 直接使用列的Width属性（最推荐）
  这是MudBlazor官方提供的指定列宽的原生方式，优先级最高，无需额外样式处理：

  <MudDataGrid T="YourModel" Items="@yourData">
      <Columns>
          <MudGridColumn T="YourModel" Field="Name" Width="180px" Title="名称" />
          <MudGridColumn T="YourModel" Field="Description" Width="300px" Title="描述" />
      </Columns>
  </MudDataGrid>
  

• 调整列 resize 模式配合宽度设置
  如果需要支持用户拖动调整列宽，先设置DataGrid的ColumnResizeMode，再搭配Width属性：

  <MudDataGrid T="YourModel" Items="@yourData" ColumnResizeMode="ColumnResizeMode.Fit">
      <Columns>
          <MudGridColumn T="YourModel" Field="Id" Width="80px" Title="ID" />
          <!-- 其他列 -->
      </Columns>
  </MudDataGrid>
  

  ColumnResizeMode.Fit会让列适应容器并保留设置的最小宽度；ColumnResizeMode.Container则强制列宽总和等于容器宽度。

• 强制提高自定义样式优先级
  若坚持用类或内联样式，需通过CSS优先级覆盖内置样式：

  1. 定义CSS类（可放在组件的<style>标签或全局样式文件中）：

     .fixed-column-width {
         width: 200px !important;
         min-width: 200px !important;
     }
     

  2. 在列属性中引用：

     <MudGridColumn T="YourModel" Field="Price" CellClass="fixed-column-width" HeaderClass="fixed-column-width" Title="价格" />
     

  也可以用更精确的选择器避免!important，比如：

  .mud-table-cell.fixed-column-width {
      width: 200px;
      min-width: 200px;
  }
  

• 检查自动生成列开关
  如果开启了AutoGenerateColumns="true"，手动设置的列样式会被自动生成的列覆盖，需改为手动定义所有列（即关闭自动生成，写全<Columns>内的列配置）。

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