css - 修改 MatBlazor 应用程序的外观

Question

我正在尝试弄清楚如何更改使用 MatBlazor 的 Blazor 应用程序中的颜色，以使用 Google 的 Material Design 创建 Blazor 应用程序。

我已使用 Blazor WebAssembly 元素在 Visual Studio 中创建了一个新元素。我添加了 MatBlazor NuGet 包，并进行了必要的更改以添加 MAtBlazor css 和 js 文件。

然后我替换了 Index.razor 的内容以包含 MatBlazor 组件:

@page "/"

<MatAppBarContainer>
    <MatAppBar Class="main-app-bar" Fixed="true">
        <MatAppBarRow>
            <MatAppBarSection>
                <MatIconButton Icon="menu"></MatIconButton>
                <MatAppBarTitle>MatBlazor - Material Design components for Blazor</MatAppBarTitle>
            </MatAppBarSection>
            <MatAppBarSection Align="@MatAppBarSectionAlign.End">
                <MatIconButton Icon="favorite"></MatIconButton>
            </MatAppBarSection>
        </MatAppBarRow>
    </MatAppBar>

    <MatAppBarContent>
        Content
    </MatAppBarContent>
</MatAppBarContainer>

现在作为练习，我想更改 MatAppBar 的背景和文本颜色:

.main-app-bar {
    background-color: red;
    color: gold;
}

或

.mdc-top-app-bar {
    background-color: red;
    color: gold;
}

我已将这些 CSS 类定义添加到 app.css 以及 MainLayout.razor.css 和 NavMenu.razopr.css 中，但没有效果。

如何设置 MatBlazor 组件的 CSS 属性？

Answer 1

无需CSS编辑，只需使用MatThemeProvider服务即可: https://www.matblazor.com/Themes

这将更改整个应用的配色方案，由于您使用的是 Material design，因此建议您这样做。