MudBlazor UI库颜色

Question

我真的很想改变MudBlazor UI组件的颜色。但是，我似乎不能覆盖默认样式。有人能帮帮我吗？

Answer 1

在详细介绍如何使用CSS对MudBlazor组件进行样式设计之前，让我向您介绍一下主题文档。

如果主题化对您来说还不够，那么您有多个选项可以使用CSS更改MudBlazor元素的样式。注意，您可能必须应用!important来覆盖MudBlazor的默认样式。

一种方法是在主CSS文件中定义自己的CSS类，并将类名传递给如下组件：

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

第二种方法是通过Style属性就像这里记录的那样直接传递CSS样式。

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

另一种方法是在剃须刀中嵌入<style>标记，甚至可以使用C#变量动态修改CSS。下面的示例可以试试这把小提琴

<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;
}

最后但并非最不重要的一点是，如果您想要利用的CSS隔离，您必须确保页面/组件顶层元素是html元素，并且使用::deep 如这里所讨论的。这将将组件或页面中所有按钮的文本更改为红色：

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

Answer 2

如果您想要更改整个颜色主题，但同时希望保持何时以及如何应用颜色组合的一致性(根据.mud-*类)，则可以为整个解决方案覆盖MudBlazor的CSS变量(--mud-*)。

例如，当您使用<MudButton Color="Color.Primary"> </MudButton>时，按钮元素将自动得到应用的类组合.mud-button-text.mud-button-text-primary。然后，这个类组合应用样式：color: var(--mud-palette-primary);。通过在根级别重写--mud-palette-primary的值，您将为整个解决方案更改它；例如，使用Color.Primary为您的MudButton元素生成另一个文本颜色。

在全局CSS文件中，可以按以下方式重写CSS变量：

:root {
    --mud-palette-primary: violet;
    --mud-palette-primary-text: yellow;
}

也可以使用十六进制值，就像任何其他CSS颜色属性值一样。

如果要更改整个调色板，这可能是一项艰巨的工作，但这样就不需要定制类或!important了。

缺点是，MudBlazor保证用更新的版本更改它们对CSS变量的使用(很可能是它们的选择)；因此，随着时间的推移，这个变量重写将需要维护。(再说一遍，我能想到的任何其他可能的解决方案也是如此。)

示例片段，以快速地尝试它的这里。

(注意:在示例片段中，除了Variant之外，MudButton元素还设置了属性Color；这设置了一组不同的类，它们再次以不同的方式使用MudBlazor CSS变量应用样式。)

Answer 3

要覆盖默认的Mudblazor颜色，可以使用自定义Palette创建主题，如下所示。然后，您可以访问覆盖所有您想要的调色板颜色属性。

MainLayout.razor

@inherits LayoutComponentBase

<MudThemeProvider Theme="myTheme"/>
<MudDialogProvider/>
<MudSnackbarProvider/>

<MudLayout...>

@code {
    private MudTheme myTheme = new()
    {
        Palette = new Palette
        {
            Primary = "#0074D9",
            Secondary = "#3D9970",
            Info = "#001f3f",
            Success = "#2ECC40",
            Warning = "#FF851B",
            Error = "#F012BE",
            AppbarBackground = "#85144b",
            // more color properties
        }
    };
}

myTheme默认颜色：

​

​