MudBlazorUI库颜色

在我们详细介绍如何使用 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;
}

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

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