MudBlazor UI 库颜色答案

【问题标题】：MudBlazor UI Library ColoursMudBlazor UI 库颜色
【发布时间】：2021-04-24 07:50:50
【问题描述】：

我真的很想更改 MudBlazor UI 组件的颜色。但是，我似乎无法覆盖默认样式。有人可以帮帮我吗？

【问题讨论】：

如果答案对您有帮助，请将其标记为已接受

标签： c# styling mudblazor

【解决方案1】：

在我们详细介绍如何使用 CSS 为 MudBlazor 组件设置样式之前，让我为您指出theming documentation。

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

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

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

第二种方式是通过Style属性直接传递CSS样式，like documented here

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

另一种方法是在剃须刀中嵌入<style> 标签，您甚至可以使用C# 变量来动态修改CSS。下面的例子你可以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;
}

最后但同样重要的是，如果您想利用 Blazor 的 CSS 隔离，您必须确保您的页面/组件顶级元素是 html 元素并且您使用 ::deep@987654324 @。这会将组件或页面中所有按钮的文本更改为红色：

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

【讨论】：

能否更新主题文档链接？ ty
完成，谢谢帕维尔！

【解决方案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 的值，您将为整个解决方案更改它；导致，例如，您的 MudButton 元素的另一种文本颜色为 Color.Primary。

在您的全局 CSS 文件中，可以按如下方式覆盖 CSS 变量：

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

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

如果要更改整个调色板，这可能是一项艰巨的工作，但不需要自定义类或!importants。

不利的一面是，MudBlazor 保证会使用较新的版本更改其对 CSS 变量的使用（可能还有他们的选择）；所以这个变量覆盖将需要随着时间的推移进行维护。（再说一次，我能想到的任何其他可能的解决方案也是如此。）

示例 sn-p 快速试用here。

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

【讨论】：