如何解决MudBlazor UI 库颜色
我真的很想更改 MudBlazor UI 组件的颜色。但是,我似乎无法覆盖默认样式。有人可以帮我吗?
解决方法
在我们详细介绍如何使用 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
as discussed here。这会将组件或页面中所有按钮的文本更改为红色:
::deep .mud-button-text { color: red !important; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。