一种设置 blazor EditForm 样式的方法

Question

我想知道是否可以用 css 或其他东西以某种方式设置 blazor Editform 的样式，我想弄清楚如何更改 EditForm 的位置并更改宽度、高度等，如果可能的话。

我试图将 class/id 分配给编辑表单，但这是不可能的。

<EditForm Model="@esuper">
<label for="Firstname">First Name</label>
<InputText id="firstname" @bind-Value="firstName"></InputText>

Answer 1

您可以通过多种方式添加样式，我 post 这里是一个使用 class、样式和通过元素 ID 的示例：

<EditForm Model="@exampleModel" 
    OnValidSubmit="@HandleValidSubmit" 
    id="MyEditForm"
    style="color: blue"
    class="MyEditClass"
    >
        <label>Some Text</label>
        <br/>
        <InputText id="name" @bind-Value="exampleModel.Name" />

        <button type="submit">Submit</button>
        <br/>
</EditForm>

<style>
    #MyEditForm {
        background-color: yellow;
    }

    .MyEditClass {
        font-family: "Comic Sans MS", "Comic Sans", cursive;
    }
</style>

享受结果：

有关其内部工作原理的详细信息，请阅读 Attribute splatting and arbitrary parameters。

一种设置 blazor EditForm 样式的方法

A way to style a blazor EditForm

html

css

c#

blazor