在 Blazor 页面/组件中设置背景样式答案

【问题标题】：Styling Background in Blazor page/component在 Blazor 页面/组件中设置背景样式
【发布时间】：2020-09-28 21:15:15
【问题描述】：

我现在有一个 Blazor 应用程序，一个默认的“/”页面和一个名为“/rtdpage”的页面

将“/”上的背景设置为黑色没有问题

html, body {
    background-color: black;
}

问题是我希望 /rtdpage 使用背景色：rgb(189, 191, 193);

我不知道如何将类应用到页面/应用程序/正文，或者让背景发生变化试过了：

@page "/rtdpage"

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

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

@code {}

还干了把<div> 放在周围并将其设置为 100% 宽度和 100% 高度，但仍然使大部分页面保持黑色

显然，我是这方面的新手

【问题讨论】：

【解决方案1】：

第二次尝试，

您可以创建 2 个组件；

黄牌

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

}

当您随后访问这些页面时；你看这个；

如果你想要一个完整的蓝色或黄色页面，没有其他任何东西，你需要将 MainLayout.razor 组件更改为：

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

【讨论】：

我没有问题 - 我想要整个页面都是灰色的（还有一个是蓝色的，另一个是深绿色的，还有一个是亮绿色的......）
我调整了答案，...问候
所以，页面现在是：@page "/rtdpage" <style> body{ background-color:rgb(189, 191, 193); } </style> <h1>This is the RTD page</h1> @code {}，主布局是@inherits LayoutComponentBase <div class="main"> <div class="content px-4"> @Body </div> </div>，我仍然得到：带有灰色背景的
（是的在页面顶部），但整个屏幕下部仍然是黑色的
你能给我发一封邮件告诉我你的解决方案吗？问候

【解决方案2】：

您可以在主类中添加带有 inline CSS 的背景颜色，根据您在 MainLayout.razor 中选择的颜色。

div class="main" style="background-color: #F8F9FB"

【讨论】：

（是的在页面顶部），但整个屏幕下部仍然是黑色的