Modify the look-and-feel of MatBlazor application

Question

I am trying to figure out how I can change the colors in a Blazor application which uses MatBlazor to create a Blazor application using Google's Material Design.

I have created a new project in Visual Studio using the Blazor WebAssembly project. I've added the MatBlazor NuGet package, made the necessary changes to add the MAtBlazor css and js files.

Then I replaced the content of Index.razor to include a MatBlazor component:

@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>

Now as an exercise I want to change the background and text color of the MatAppBar:

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

or

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

I've added these CSS class definitions to both app.css as well as MainLayout.razor.css and NavMenu.razopr.css to no avail.

How can I set CSS properties for MatBlazor components?

Answer 1

I have found 2 ways to make this happen:

Include the .mdc-XXX settings in the .razor file as a element:

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

or

create a new CSS file and include it last in index.html.

Answer 2

There is no need for css editing, you can simply use the MatThemeProvider service: https://www.matblazor.com/Themes

This will change the color scheme for your entire app, which is recommended since you are using Material design.