2

我试图弄清楚如何更改 Blazor 应用程序中的颜色，该应用程序使用 MatBlazor来使用 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 属性？

4

2 回答 2

1

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

这将更改整个应用程序的配色方案，建议您这样做，因为您使用的是 Material Design。

于 2021-03-15T11:34:44.837 回答
0

我找到了两种方法来实现这一点：

在 .razor 文件中包含 .mdc-XXX 设置作为元素：

<style>
.mdc-top-app-bar {
    background-color: red;
    color: gold;
}
</style>

或者

创建一个新的 CSS 文件并将其最后包含在 index.html 中。

于 2020-12-01T16:30:12.493 回答