[SOLVED] Styling Background in Blazor page/component

Issue

I have a Blazor app, right now, a default "/" page and one called "/rtdpage"

No problem getting the background on the "/" to black

html, body {
    background-color: black;
}

Problem is that I'm looking to get the /rtdpage styled with a background-color:rgb(189, 191, 193);

I can't figure out how to apply a class to the page/app/body, or get the background to change Tried:

@page "/rtdpage"

<style>
    background-color:rgb(189, 191, 193);
</style>

<h1>This is the RTD page</h1>

@code {}

Also dried putting a <div> around and setting it to 100% width and 100% height, but still leaves most of the page black

Obviously, I'm a newbie at this

Solution

Second try,

You can create 2 components ;

YellowComp

@page "/Yellow"

<style>
    body {
        background-color: yellow;
    }
</style>

<h3>YellowBackground</h3>

@code {

}

BlueComp

@page "/Blue"

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

<h3>BlueBackground</h3>

@code {

}

When you then go these pages; you see this;

In case you would like to have a complete blue or yellow page , without anything else, you need to change the MainLayout.razor component to this :

<div class="main">
     <div class="content px-4">
        @Body
    </div>
</div>

Answered By - Mathias Z