Can't extending styles

[MuttakinHasib]

hey, I want to extend the style for the input field like this.

const StyledInput = styled(InputField)`
  input {
    background-color: red;
  }
`

but the input tag lost old styles/classNames

InputField.tsx

import React from 'react'
import { RegisterOptions, useForm } from 'react-hook-form'

// eslint-disable-next-line @typescript-eslint/ban-types
interface Props extends React.PropsWithChildren<{}>, React.InputHTMLAttributes<HTMLInputElement> {
  label?: string
  options?: RegisterOptions
}

const InputField = (props: Props) => {
  const { name, label, options, children, ...rest } = props
  const { register } = useForm({ mode: 'all' })
  return (
    <div className="space-y-3">
      {label && (
        <label className="font-prata text-xl" htmlFor={name}>
          {label}
        </label>
      )}
      {name && (
        <input
          className={`${props.className} block border bg-brand/5 border-brand/[0.04] focus:bg-slate-50 focus:border-brand focus:outline-none focus:ring-0 w-96  rounded`}
          id={name}
          {...register(name, options)}
          {...rest}
        />
      )}
      {children}
    </div>
  )
}

export default InputField

[srmagura]

If you do console.log(rest), you will see it contains a className property. So when you do {...rest}, it overwrites

className={`${props.className} block border bg-brand/5 border-brand/[0.04] focus:bg-slate-50 focus:border-brand focus:outline-none focus:ring-0 w-96  rounded`}`

Fix:

-const { name, label, options, children, ...rest } = props
+const { name, label, options, className, children, ...rest } = props

[MuttakinHasib]

thank you @srmagura