How to customise a MudBlazor Component

Question

So I have a this MudBlazor <MudSelect /> Component and I want to change its display font to .75rem. (Below doesn't work!)

<MudSelect style="font-size: .75rem!;" T="string" MultiSelection="true" ...

So after the chosen values are selected, and displayed, I would like that text to be much smaller than the default.

I have been struggling with this change, and now wonder if it's possible and if so how?

Or any similar form of component customisation?

Answer 1

You can target the .mud-select-input CSS class.

<style>
    .change-only-this .mud-select-input{
    font-size:.75rem;
    }
</style>

<MudSelect Class="change-only-this" T="string" Label="CustomStyle" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Henon Rex")" />
</MudSelect>

In the example above, I add change-only-this class to the MudSelect so that only that component is modified.

MudBlazor Snippet

Answer 2

Did you try to simply capitalize the Style attribute?

<MudSelect Style="font-size: .75rem!;" T="string" MultiSelection="true" ...

https://mudblazor.com/api/select#properties