Maui Blazor Hybrid应用程序的内部造型

Question

如何在Maui Blazor Hybrid应用程序中使用内部样式？我的代码如下。

背景颜色样式被忽略。

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

}

Answer 1

它被忽略，因为它不是有效的css。

您可以使用内联样式：

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

或者定义一个css类：

<style>
.bg-blue {
background-color: blue;
}
</style>
<h1 class="bg-blue">Hello, world!</h1>

但在剃须刀组件中添加样式标签并不是一个好主意。

您应该使用"；css隔离"这是blazor特征。

指数剃刀：

@page "/"
<h1 class="header">Hello, world!</h1>
@code {
}

创建Index.razor.css：

.header {
background-color: blue;
}