blazorblazor-server-sidemudblazor

MudBlazor DataGrid Column Headings not Bold


I am using mudblazor 6.10.0. I have a MudDataGrid and everything works fine but the column headings are not bold like in the samples. I have the grid defined as follows

 <MudDataGrid T="Range" MultiSelection="true" FilterCaseSensitivity="DataGridFilterCaseSensitivity.CaseInsensitive" Items="@_carRanges" SortMode="SortMode.Multiple" Dense ="true"
             QuickFilter="@QuickFilter" ColumnResizeMode="@(ResizeMode.Column)" DragDropColumnReordering="true" Striped="true" FilterMode="DataGridFilterMode.ColumnFilterRow">
        <ToolBarContent>
            <MudTooltip Text="Add Range">
                <MudFab id="Add-CarRange" Color="Color.Tertiary" Size="Size.Medium" StartIcon="@Icons.Material.Filled.Add" Href="feerangesave/0" />
            </MudTooltip>
            <MudTextField @bind-Value="SearchString" Placeholder="Search" Adornment="Adornment.Start" Immediate="true"
                      AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
        </ToolBarContent>
        <Columns>
            <PropertyColumn Property="x => x.Name" Title="name" Resizable="true" Filterable="true" />

            <PropertyColumn Property="x => x.MinRange" Title="Min Range" Resizable="true" Filterable="true" Format="N0" CellStyle="text-align: right"/>
            <PropertyColumn Property="x => x.MaxRange" Title="Max Range" Resizable="true" Filterable="true" Format="N0" CellStyle="text-align: right"/>
        </Columns>
    </MudDataGrid>

In the MainLayout.cs i have the following

 <MudDialogProvider/>
    <MudThemeProvider />
    <MudLayout>
        <MudAppBar Elevation="1" Dense="true" Color="MudBlazor.Color.Info">
            <MudIconButton Icon="@Icons.Material.Filled.Menu" Edge="Edge.Start" OnClick="@ToggleDrawer" />
            <MudSpacer />
            <MudText Typo="Typo.h5" Color="MudBlazor.Color.Default" Style="color: white;">@Heading</MudText>
        </MudAppBar>
        <MudDrawer @bind-Open="@_menuOpen" ClipMode="_clipMode" Elevation="1" Variant="@DrawerVariant.Responsive">
            <NavMenu />
        </MudDrawer>
        <MudMainContent>
            <CustomErrorBoundary>
                <div class="content px-4">
                    @Body
                </div>
            </CustomErrorBoundary>
        </MudMainContent>
    </MudLayout>

Here is the th being overridden


Solution

  • You can always add styles to it manually with the PropertyColumn.HeaderStyle property. i.e.

    <PropertyColumn Title="MyPos" HeaderStyle="font-weight:900;font-size:2rem;" Property="x => x.Position" />
    

    Although, as @maciek mentions in the comments, you should try to find what's overriding your style first.