您如何在Blazor服务器端ValidationMessages中更改EditForms的样式？

Question

我有EditForm，如下所示：

<EditForm class="container-fluid" Context="formContext" Model="@_inputModel" OnValidSubmit="() => OnSubmitInput()">
    <DataAnnotationsValidator />
    <!-- other stuff ordered in bootstrap cols and rows --> 
    

    <div class="col-6">
        <ValidationMessage For="() => _inputModel.NumberOfInputChannels"/>
        <label for="stNumberOfChannels" class="form-label">Number of Channels</label>
        <input type="number" class="form-control" id="stNumberOfChannels" 
            @bind="_inputModel.NumberOfInputChannels">
    </div>

</EditForm>

与表单对应的模型的属性如下所示：

[Range(1, 4, ErrorMessage = "Number of Channels must be between 1 and 4!")]
[JsonPropertyName("n-channels")]
public ushort NumberOfInputChannels { get; set; } = 3;

我的问题很简单，这条信息看上去太大了，所以我想让它变小：

​

我已经尝试过将class="fs-6"添加到<ValidationMessage />标记中，但它似乎没有任何效果。

Answer 1

以下任一项：

1. 修改CSS中的validation-message
2. 将ValidationMessage包装在div中，并在div上设置您想要的任何CSS。

<div class="fs-6">
    <ValidationMessage For="() => myData.Name" />
</div>

作为参考，ValidationMessage源BuildRenderTree如下所示：

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        foreach (var message in CurrentEditContext.GetValidationMessages(_fieldIdentifier))
        {
            builder.OpenElement(0, "div");
            builder.AddAttribute(1, "class", "validation-message");
            builder.AddMultipleAttributes(2, AdditionalAttributes);
            builder.AddContent(3, message);
            builder.CloseElement();
        }
    }

Answer 2

<ValidationMessage>有一个参数AdditionalAttributes，它捕获属性。但是，它将类属性本身设置为validation-message，这可以在wwwroot/css中找到。

 <ValidationMessage For="() => _inputModel.NumberOfInputChannels"
                    style="font-size: 1rem;"/>

fs-6是1rem

源代码