修改MatBlazor应用程序的外观

Question

我正试图弄清楚如何在一个应用程序中改变颜色，该应用程序使用MatBlazor来创建一个使用Google的Blazor应用程序。

我已经在Visual中使用Blazor WebAssembly项目创建了一个新项目。我添加了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

这将改变你的整个应用程序的配色方案，这是推荐的，因为你使用的是材料设计。

Answer 2

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

将. Include设置作为元素包含在.razor文件中：

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

或

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