c# - MudBlazor UI 库颜色
问题描述
我真的很想更改 MudBlazor UI 组件的颜色。但是,我似乎无法覆盖默认样式。有人可以帮我吗?
解决方案
在我们详细介绍如何使用 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; }
推荐阅读
- c# - 如何使用 Linq 查询包含列表列表的列表,该列表包含包含对象列表的列表列表?
- tensorly - 如何从 tensorly 设计对 partial_tucker 函数的测试?
- c# - 如何在 Unity 中编写精灵之间的渐变过渡?
- android - 中国安卓设备杀死后台服务
- c# - 系统线程 Timer vs Scheduler
- java - 控制台中的 Java 路径漂亮输出集
- c# - Selenium Chrome,Ctrl+C 使 Chrome 无响应
- javascript - 将元素从固定定位转换为静态定位使页面跳转到顶部
- php - 为帖子添加评论
- python-3.x - 如何从 xml 中删除列表中不存在的子节点