MudBlazor UI Library Colours

Question

I really would like to change the colours of MudBlazor UI Components. However, I cannot seem to override the default styles. Could someone please help me?

Answer 1

Before we go into detail how to use CSS to style MudBlazor components, let me point you to the theming documentation.

If theming is not enough for you, you have multiple options how you can change the style of MudBlazor elements with CSS. Note, you might have to apply !important to override MudBlazor's default styles.

One way is to define your own CSS class in your main CSS file and pass your class name to the component like this:

<MudButton Class="my-class">Button with custom class</MudButton>

The second way is to directly pass CSS styles via the Style property, like documented here

<MudButton Variant="Variant.Filled" EndIcon="@Icons.Material.ArrowDownward" Style="background-color: yellowgreen; color: white; width: 200px; height: 60px;">
    Download Now
</MudButton>

Another way is to embed a <style> tag in your razor where you can even use C# variables to dynamically modify the CSS. The following example you can try out in this fiddle

<style>
    button {
       background-color: yellowgreen !important; 
       color: white !important; 
       height: @(height)px;
    }
</style>
<MudSlider @bind-Value="height" Min="30" Max="300"/>
<MudButton Variant="Variant.Filled">
    Use Slider to change my height
</MudButton>

@code {
  int height=100;
}

Last but not least, if you want to make use of Blazor's CSS isolation you have to make sure your page/component top level element is an html element and that you use ::deep as discussed here. This will change the text of all buttons in your component or your page to red:

::deep .mud-button-text { color: red !important; }