CODEWITHSUNDEEP
blazormaui
Gary Horan
Gary Horan

Reputation: 3

Internal styling in Maui Blazor Hybrid apps

How to use internal styling in Maui Blazor Hybrid apps? My code follows.

The background-color stying is ignored.

    @page "/"
    <style>
        background-color : blue;
    </style>
    <h1>Hello, world!</h1>
    @code {
    
    }

Upvotes: 0

Views: 759

Answers (1)

Dimitris Maragkos
Dimitris Maragkos

Reputation: 11392

It's ignored because it's not valid css.

You can either use inline style:

<h1 style="background-color: blue;">Hello, world!</h1>

Or define a css class:

<style>
    .bg-blue {
        background-color: blue;
    }
</style>

<h1 class="bg-blue">Hello, world!</h1>

But it's not good idea to add style tag inside razor component like that.

You should use "css isolation" which is a blazor feature.

Index.razor:

@page "/"

<h1 class="header">Hello, world!</h1>

@code {

}

Create Index.razor.css:

.header {
    background-color: blue;
}

Upvotes: 1

Related Questions