Запретить добавление цвета в <FormLabel> в Shadcn и React

Вам необходимо внести некоторые изменения в компонент FormLabel (в файле form.jsx), созданный shadcn cli.

Новая метка формы:

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}
    />
  )
})

Вы можете внести изменения в сам FormLabel, но это может быть проблематично при обновлении shadcn. Вы можете просто передать !text-current как имя класса, чтобы переопределить поведение:

<FormLabel className = "!text-current">

Затем вы можете создать обертку вокруг базы FormLabel, которая будет делать это каждый раз, а затем использовать ее. Таким образом, вы избегаете прикосновения к сгенерированным компонентам, что может облегчить жизнь при обновлении shadcn.

Но если вас не волнует их прикосновение, вы можете просто отредактировать оригинал FormLabel, чтобы на самом деле не добавлять text-destructive как ответ Пиналя.

Чтобы предотвратить изменение цвета метки при возникновении ошибки в форме пользовательского интерфейса Shadcn, вы можете переопределить поведение по умолчанию, настроив стили. Вот как вы можете это сделать:

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