如何在Blazorise中修改BarMenu的字体颜色？

阿华AIGC实验室

2026-5-11

解决Blazor BarMenu字体颜色无法修改的问题

我懂你这种头疼的情况——直接给<Bar>加内联color:red完全没反应，这其实是UI组件库的内部CSS优先级比你写的内联样式高，而且内联样式是加在根元素上，根本没作用到实际的菜单文本子元素上。下面给你一步步解决：

1. 找到全局CSS文件

在Blazor项目里，全局样式文件一般是这两个位置：

Blazor Server项目：wwwroot/css/site.css
Blazor WebAssembly项目：wwwroot/css/app.css
打开这个文件，我们要在这里写自定义样式来覆盖组件的默认样式。

2. 编写精准的CSS选择器

因为菜单文本是在<BarLink>和<BarDropdownItem>这些子组件里，我们需要定位到这些元素：

/* 覆盖普通菜单链接的字体颜色 */
.custom-red-bar .mud-bar-item .mud-bar-link {
    color: red;
}

/* 覆盖下拉菜单选项的字体颜色 */
.custom-red-bar .mud-bar-dropdown-item {
    color: red;
}

注：这里的custom-red-bar是我们要给<Bar>加的自定义类，这样只会修改这个特定Bar的样式，不会影响其他组件。如果不需要限定范围，也可以去掉.custom-red-bar直接写选择器，不过推荐用自定义类避免全局样式污染。

如果你的UI库不是MudBlazor，类名可能不同——打开浏览器F12开发者工具，右键点击菜单文本选「检查」，看Elements面板里对应的元素class，替换上面的类名就行。

3. 给Bar组件添加自定义类

修改你的Razor代码，给<Bar>加上我们定义的custom-red-bar类，同时可以去掉无效的内联color:red：

<Bar Breakpoint="Breakpoint.Desktop" Background="Background.Light" ThemeContrast="ThemeContrast.Light" Class="sticky-top custom-red-bar" Style="font-size:large;">
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#">Home</BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="#">Documentation</BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>Dropdown</BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem>Action</BarDropdownItem>
                        <BarDropdownItem>Another action</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
        <BarEnd>
            <BarItem>
                <Button Color="Color.Primary">Sign up</Button>
                <Button Color="Color.Secondary">Log in</Button>
            </BarItem>
        </BarEnd>
    </BarMenu>
</Bar>