How can I override the style of the react-phone-number-input component using

    //React hook form
    const {
        register,
        handleSubmit,
        watch,
        formState: { errors },
        control,
      } = useForm();


    //Component
    <PhoneInputWithCountry
      international
      name="phone"
      control={control}
      defaultCountry="BD"
      country="BD"
      id="phone"
      className="rounded rounded-full bg-gray-100 py-1 px-2 text-gray-700 shadow-sm border-green"
    />

CodePudding user response：

I don't think you can set classes. Because component styles override them. You can set the style prop like this. And make sure to import component styles as well. import 'react-phone-number-input/style.css'

<PhoneInputWithCountry
   style={{borderRadius: 3px, ...}}
   ...
/>