如何阻止Shadcn中<FormLabel>在字段错误/必填时变红

当FormItem下的字段存在错误或为必填项时，Shadcn的FormLabel会自动继承父级的text-destructive类变成红色，要只让FormMessage显示红色，有几种可行方案：

方案一：全局样式覆盖 #

通过CSS针对性覆盖FormLabel在错误状态下的颜色，保持默认文本颜色：

/* 对应Shadcn FormItem和FormLabel的实际类名，若你的类名不同需调整 */
.form-item[data-state="invalid"] .form-label {
  color: inherit; /* 或者指定你需要的默认颜色，比如#1f2937 */
}

添加这段样式到你的全局CSS文件（比如globals.css）即可，原组件代码无需修改。

方案二：自定义FormLabel组件 #

Shadcn的组件都是可定制的，你可以修改FormLabel的实现，移除它对错误状态的响应：

1. 打开项目中components/ui/form.tsx文件
2. 找到FormLabel的定义，移除所有和错误状态相关的颜色类。修改后的代码示例：

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cn } from "@/lib/utils"

const FormLabel = React.forwardRef<
  HTMLLabelElement,
  React.LabelHTMLAttributes<HTMLLabelElement>
>(({ className, ...props }, ref) => {
  return (
    <LabelPrimitive.Root
      ref={ref}
      className={cn(
        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
        // 移除原有的错误状态颜色类
        className
      )}
      {...props}
    />
  )
})
FormLabel.displayName = LabelPrimitive.Root.displayName

export { FormLabel }

保存后，你的FormLabel就不会再随错误状态变红了。

方案三：强制覆盖样式（应急用） #

如果只是临时解决，可以直接给FormLabel添加默认颜色类并强制生效：

<FormLabel className="text-gray-900 !important">Project Name</FormLabel>

这种方法不够优雅，不推荐长期使用。

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