或者，如果您想要纯C#代码而不使用blazor：

public string BackgroundImage { get; set; }
<style>
        background-image: url(@BackgroundImage);
        width: 100%;
        height: 100%;
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: darkgray;
        overflow: hidden;
</style>

或者，我使用Nuget包BlazorStyled：

https://github.com/chanan/BlazorStyled

这是一个样本：

<Styled @bind-Classname="CanvasStyle">
    position: fixed;
    top: 18vh;
    left: 5%;
    width: 60%;
    height: 64vh;    
</Styled>
<div class=@CanvasStyle></div>

这是我为BlazorStyled制作的一段视频，如果你想看的话：

https://youtu.be/frtetHgfdIo

巴兹尔应该有一个简单的方法来做这件事，但是，目前还没有，希望有一天会很快。

我做了一个组件来解决这个问题。它允许您从页面或组件中设置页面主体元素的CSS类。您还可以设置lang属性和dir属性来设置页面的语言和文本方向。这些是我认为您可能想要更改的所有属性，但是如果需要，您可以添加更多的属性。

您可以在这里下载代码： https://github.com/BenjaminCharlton/BlazorBody

或者，这里总结了如何做到这一点：

scripts/BodyElement.js中的

1. 创建一个小JavaScript文件来操作body元素

​

    var getBodyElement = function() {
        return document.getElementsByTagName("body")[0];
    var addCssClassToBody = function (cssClass) {
        var body = getBodyElement();
        if (!body.classList.contains(cssClass)) {
            body.classList.add(cssClass);
    var setLanguageOfBody = function (language) {
        var body = getBodyElement();
        body.lang = language;
    var setTextDirectionOfBody = function (direction) {
        var body = getBodyElement();
        body.dir = direction;
    }

​

1. 在index.html

一节中放置到您的JavaScript的链接

​

<script src="/script/bodyelement.js"></script>

​

1. 创建了一个小的CSS类来测试结果。

​

    body {
        background: white;
        color: black;
    body.danger {
        background: red;
        color: white;
    }

​

1. 制作了一个BodyElement剃须刀组件，您可以在任何页面上使用您可以从该页中设置的属性放置它。

。

​

@inject IJSRuntime JSRuntime
@code {
    protected async override Task OnParametersSetAsync()
        if (CssClass is { })
            await JSRuntime.InvokeVoidAsync("addCssClassToBody", CssClass);
        if (Language is { })
            await JSRuntime.InvokeVoidAsync("setLanguageOfBody", Language);
        if (TextDirection is { })
            await JSRuntime.InvokeVoidAsync("setTextDirectionOfBody", TextDirection);
    [Parameter]
    public string? CssClass { get; set; } = null;
    [Parameter]
    public string? Language { get; set; } = null;
    [Parameter]
    public string? TextDirection { get; set; } = null;
}

​

1. 将BodyElement剃刀组件放置在您希望操作标记的任何页面上，并设置属性

。

​

    @page "/danger"
        <BodyElement CssClass="danger" />

​

只需注入 IJSRuntime 并使用它调用JavaScript函数来进行此更改。

在你的组成部分中：

[Inject]
IJSRuntime JSRuntime { get; set; }

然后：

private async Task ThemeChanged()
    isDark = !isDark;
    await JSRuntime.InvokeVoidAsync("MyInterop.ChangeTheme", isDark);
}

在你的JS中：

window.MyInterop = (function () {
    const _changeTheme = function (isDark) {
        if (isDark)
            document.body.classList.add('dark-theme');
            document.body.classList.remove('dark-theme');