Blazor Server端EditForm如何修改ValidationMessages样式

为什么直接加class不生效 #

Blazor 内置的<ValidationMessage />组件不会自动透传你写在组件标签上的class属性到最终渲染的DOM元素上。默认情况下这个组件会渲染一个带validation-message类的<div>来显示错误文本，你加的fs-6类根本没有出现在最终生成的页面元素里，自然不会产生任何效果。

两种可用的修复方案 #

• 全局统一样式（最省事）
  所有Blazor验证消息渲染时都会自带validation-message类名，直接在全局CSS或者组件隔离样式里覆盖这个类的字号即可，和Bootstrap风格适配的代码如下：

  .validation-message {
      font-size: 0.875rem; /* 对应Bootstrap fs-6的14px字号，要更小可自行调整数值 */
      color: #dc3545; /* 保持Bootstrap默认的错误提示红色 */
  }
  

  改完一次所有表单的验证消息样式都会统一，不用逐个修改组件标签。

• 单条消息自定义样式
  如果只需要调整某一处的验证消息样式，可以用组件的内容模板自定义渲染逻辑，自己控制输出的标签和类名：

  <ValidationMessage For="() => _inputModel.NumberOfInputChannels">
      <span class="text-danger fs-6 d-block mb-1">@context</span>
  </ValidationMessage>
  

  模板里的@context就是返回的错误文本，你可以自由加任意Bootstrap工具类、自定义边距行高，完全不受组件默认渲染规则限制。

你看到的字号偏大问题，本质是Blazor默认项目模板自带的样式给.validation-message设置了较大的默认字号，覆盖对应类的样式就能直接解决。

内容的提问来源于stack exchange，提问作者Roland Deschain