如何让MudBlazor MudDataGrid始终可用横向滚动，无需先滚动至底部？

默认情况下MudBlazor的MudDataGrid横向滚动条仅在纵向滚动到行底部时才会显示，操作繁琐，以下是两种可行的解决方法：

方法一：使用组件自带属性（推荐） #

通过启用FixedHeader属性，让表头固定的同时，横向滚动条会始终显示在表格底部区域，无需滚动到行底即可访问。可以配合设置Height属性固定表格高度，确保滚动容器稳定生效。

修改后的代码示例：

<MudDataGrid T="Repair"
             Items="@Page.Repairs"
             Sortable="true" SortMode="SortMode.Multiple" ColumnResizeMode="ResizeMode.Column"
             Filterable="false"
             Outlined="true"
             Loading="Page.ProcessingSubmitQuery"
             RowsPerPage="10"
             Hover="true"
             QuickFilter="@QuickFilter"
             FixedHeader="true"
             Height="500px"> <!-- 可选：固定表格高度，确保滚动行为稳定 -->
    <ToolBarContent>
        <MudText Typo="Typo.body1" Class="mr-1">Job Number:</MudText><MudText Typo="Typo.h6" Class="mr-4">@Page.JobNumber</MudText>
        <MudText Typo="Typo.body1" Class="mr-1">Repair Code:</MudText><MudText Typo="Typo.h6" Class="mr-4">@Page.RepairCode</MudText>
        <MudText Typo="Typo.body1" Class="mr-1">Customer Id:</MudText><MudText Typo="Typo.h6" Class="mr-8">@Page.CustomerId</MudText>
        @*<MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" Immediate="true" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0" />*@
        <MudSpacer />
        <MudButton Class="ml-4" @onclick="ExportToExcelAsync" Color="Color.Primary" Variant="Variant.Outlined">Export to Excel</MudButton>
    </ToolBarContent>
    <Columns>
        <Column T="Repair" Field="Repair_Id" Sortable="true" Title="#" CellStyle="width: 10px">
            <CellTemplate>
                <MudLink Href="@GetRepairDetailPageLink(context.Repair_Id)" Target="_blank">
                    <MudText Style="color:darkblue">@context.Repair_ID</MudText>
                </MudLink>
            </CellTemplate>
        </Column>
        <Column T="Repair" Field="Mechanic" Sortable="true" Title="Mechanic" CellStyle="min-width: 10px" />
        <Column T="Repair" Field="Description" Sortable="false" Title="Description" CellStyle="min-width: 300px" />
        <Column T="Repair" Field="Repair" Sortable="false" Title="Repair Made" CellStyle="min-width: 200px" />
    </Columns>
    <PagerContent>
        <MudDataGridPager T="Repair" PageSizeOptions=@(new int[] {10, 25, 50, 100, 150, 200 }) />
    </PagerContent>
</MudDataGrid>

启用FixedHeader后，表头与内容区域分离，内容滚动容器会始终显示横向滚动条，无论纵向滚动到什么位置。若不设置固定高度，表格会自适应内容高度，但只要内容宽度超出容器，横向滚动条就会直接显示。

方法二：自定义CSS强制显示 #

如果不需要固定表头，可通过自定义CSS强制内容区域始终显示横向滚动条：

.mud-data-grid-content {
    overflow-x: auto !important;
}

将这段CSS添加到组件的样式区域或全局样式文件中即可生效。

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