MudBlazor UI 库颜色

问题描述 投票：0回答：3

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

c# styling mudblazor
3个回答
26
投票

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

最后但并非最不重要的一点是，您可以利用 CSS 变量用自定义值覆盖颜色。以下是如何覆盖复选框颜色的示例（在此处尝试）：

<style>
    .mud-checkbox svg path:last-child {
        fill: var(--custom-color) !important;
    }
</style>
<MudCheckBox T="bool" Style="--custom-color: #abcdef" Color="Color.Primary">Series 1</MudCheckBox>
<MudCheckBox T="bool" Style="--custom-color: cornflowerblue" Color="Color.Primary">Series 2</MudCheckBox>
19
投票

如果您想更改默认的 

Mudblazor
颜色，您可以使用自定义 
Palette
制作自己的主题。这使您可以根据需要更改任何调色板颜色属性。看看下面的例子。

更新：新版本的

MudBlazor
框架引入了新类：
PaletteLight
和
PaletteDark
。 
Palette
类现已过时。您可以使用 
PaletteLight
类覆盖默认颜色，或使用这两个类为您的应用提供浅色和深色主题。

具有自定义颜色的主布局：

MainLayout.razor
：

@inherits LayoutComponentBase

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

<MudLayout>
    <MudAppBar Elevation="0">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(e => DrawerToggle())"/>
        <MudSpacer/>
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">MyApplication</MudText>
        </MudDrawerHeader>
        <NavMenu/>
    </MudDrawer>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-8">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code {
    bool _drawerOpen = true;

    private readonly MudTheme _currentTheme = new()
    {
        Palette = new PaletteLight
        {
            Primary = "#0A7BCF",
            Secondary = "#4CAF50",
            Info = "#64a7e2",
            Success = "#2ECC40",
            Warning = "#FFC107",
            Error = "#FF0000",
            AppbarBackground = "#212121",
            TextPrimary = "#0A7BCF",
            TextSecondary = "#4CAF50",
            // more color properties
        }
    };

    void DrawerToggle() => _drawerOpen = !_drawerOpen;
}

深色主题的主要布局：

MainLayout.razor
：

@inherits LayoutComponentBase

<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode" Theme="_currentTheme"/>
<MudDialogProvider/>
<MudSnackbarProvider/>

<MudLayout>
    <MudAppBar Elevation="0">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(e => DrawerToggle())"/>
        <MudSpacer/>
        <MudIconButton Icon="@Icons.Material.Filled.Brightness4"
                       Color="Color.Inherit"
                       Class="nav-button"
                       OnClick="@ThemeToggle"/>
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">MyApplication</MudText>
        </MudDrawerHeader>
        <NavMenu/>
    </MudDrawer>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-8">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code {
    bool _drawerOpen = true;
    private bool _isDarkMode;
    private MudThemeProvider _mudThemeProvider;

    private readonly MudTheme _currentTheme = new()
    {
        Palette = new PaletteLight
        {
            Primary = "#0A7BCF",
            Secondary = "#4CAF50",
            Info = "#64a7e2",
            Success = "#2ECC40",
            Warning = "#FFC107",
            Error = "#FF0000",
            AppbarBackground = "#212121",
            TextPrimary = "#0A7BCF",
            TextSecondary = "#4CAF50",
            // more color properties
        },
        PaletteDark = new PaletteDark
        {
            Primary = "#6585e0",
            Secondary = "#607D8B",
            Info = "#a4c2dd",
            Success = "#2ECC40",
            Warning = "#dc2d7e",
            Error = "#de2000",
            AppbarBackground = "#121212",
            TextPrimary = "#E0E0E0",
            TextSecondary = "#BDBDBD",
            // more color properties
        }
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _isDarkMode = await _mudThemeProvider.GetSystemPreference();
            StateHasChanged();
        }
    }

    void DrawerToggle() => _drawerOpen = !_drawerOpen;
    void ThemeToggle() => _isDarkMode = !_isDarkMode;

}


Index.razor
：

@page "/"

<PageTitle>Index</PageTitle>
<MudText Typo="Typo.h2" Class="mb-5">Theme Colors</MudText>

<MudStack Row="true">
    <MudButton Color="Color.Primary" Variant="Variant.Filled">Primary Button</MudButton>
    <MudButton Color="Color.Secondary" Variant="Variant.Filled">Secondary Button</MudButton>
    <MudButton Color="Color.Success" Variant="Variant.Filled">Success Button</MudButton>
    <MudButton Color="Color.Warning" Variant="Variant.Filled">Warning Button</MudButton>
    <MudButton Color="Color.Error" Variant="Variant.Filled">Error Button</MudButton>
</MudStack>
<br/>
<MudAlert Severity="Severity.Normal">The reactor type is RBMK-1000</MudAlert>
<MudAlert Severity="Severity.Info">The reactor was fired up successfully</MudAlert>
<MudAlert Severity="Severity.Success">The reactor is running at optimum temperature</MudAlert>
<MudAlert Severity="Severity.Warning">The reactor temperature exceeds the optimal range</MudAlert>
<MudAlert Severity="Severity.Error">Meltdown is imminent</MudAlert>

深色模式演示：

5
投票

如果您想更改整个颜色主题，但同时希望保持何时以及如何应用哪些颜色组合的一致性（根据

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

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

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

!important
。

缺点是，MudBlazor 肯定会在新版本中改变 CSS 变量的使用（可能还有选择）；因此，随着时间的推移，这个变量覆盖将需要维护。 （话又说回来，我能想到的任何其他可能的解决方案也是如此。）

快速尝试的示例片段这里。

（注意：在示例代码片段中，除了 

Variant
之外，还在 MudButton 元素上设置属性 
Color
；这设置了一组不同的类，再次使用 MudBlazor CSS 变量以不同的方式应用样式。）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.