如何在 Blazor 中更改 CSS 或 "body" 元素的类

我目前正在制作一个"更改主题"按钮，以便在"暗模式"one_answers"亮模式"之间切换整个页面。但是我找不到改变整页背景颜色的方法。

基本上，我需要更改<body>的样式(这是我唯一能想到的方法(。我的想法是，当你点击"更改主题"按钮时，<body>元素将添加一个类"暗主题"。然后我只是简单地在CSS中定义"黑暗主题"，如下所示：

body {
background-color: #FFFFFF;
color: #000000;
}
body.dark-theme {
background-color: #5A5A5A;
color: #F2F2F2;
}

我认为这很有道理，但正如你在下面看到的，我不能访问<body>元素，所以我没有办法添加类或更改它的CSS

MainLayout.rarzor

@inherits LayoutComponentBase
@using System.Web;
<div class="sidebar">
<NavMenu />
</div>
<div>
<LoginDisplay />
<button id="change-theme-btn" @onclick="ThemeChanged">Change Theme</button>
@Body
</div>
@code {
bool isDark = false;
private void ThemeChanged()
{
isDark = !isDark;
}
}

那么如何更改<body>元素的类或CSS呢？或者，如果您有其他解决方案，请告诉我。谢谢！

Blazor应该有一个简单的方法来做到这一点，但目前还没有。希望有一天会很快。

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

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

或者这里有一个如何做到这一点的总结：

制作一个小JavaScript文件来操作scripts/BodyElement.js中的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;
}

在index.html的部分放置一个指向JavaScript的链接

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

制作一个CSS小类来测试结果

body {
background: white;
color: black;
}

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

制作一个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;
}

将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');
else
document.body.classList.remove('dark-theme');
};
return {
ChangeTheme: _changeTheme
};
})();

如果您还没有，请在_Host.cshtml中引用您的JS文件，在添加Blazor运行时的行之后。

或者，如果您想要没有blazor的纯C#代码：

public string BackgroundImage { get; set; }
<style>
body 
{
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

相关内容

最新更新

热门标签：