MudBlazor select dropdown is transparent which it shouldn't be

2.8k Views Asked by At

I am using MudBlazor's multi select but when the drop-down menu opens it is transparent and you can see through to the underlying select which really doesn't look good.

This is what it looks like MudSelect dropdown background is transparent

Here is my code:

<MudGrid>
    <MudItem xs="12" md="12" lg="12">
        <MudSelect Label="US States" MultiSelection="true" @bind-Value="value" @bind-SelectedValues="options">
            @foreach (var state in states)
            {
                <MudSelectItem Value="@state">@state</MudSelectItem>
            }
        </MudSelect>
    </MudItem>
    <MudItem xs="12" md="12" lg="12">
        <MudText>MudSelect.Value: "@value"</MudText>        
    </MudItem>
</MudGrid>

What am I missing here? I looked at the documentation and the examples but did not find a clue why it works with their examples but not for me.

1

There are 1 best solutions below

0
On BEST ANSWER

Ok, I figured it out. Adding <MudThemeProvider/> to MainLayout.razor fixed the problem. It looks alright now.

MudSelect with open dropdown