防止在Shadcn和React中的<FormLabel>中添加颜色

Question

我对 shadcn 的

<FormLabel>

有疑问。当字段有错误/必填时，如何防止它显示红色（实际上它会自动添加

text-destructive

）。 我只想用

<FormMessage/>

改变颜色。

<FormField
    control={form.control}
    name="name"
    render={({ field }) => (
        <FormItem>
            <FormLabel>Project Name</FormLabel>
            <FormControl>
                <Input placeholder="Enter project name" {...field} />
            </FormControl>
            <FormMessage />
        </FormItem>
    )}
/>

Answer 1

您需要对由 shadcn cli 构建的

FormLabel

组件（在

form.jsx

文件中）进行一些更改

新表单标签：

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { formItemId } = useFormField()
 
  return (
    <Label
      ref={ref}
      className={className}
      htmlFor={formItemId}
      {...props}
    />
  )
})