How to change default style of React Phone Number input field

Question

How can I override the style of the react-phone-number-input component using https://www.npmjs.com/package/react-phone-number-input?

Along with this component, I'm using a React Hook Form and Tailwind CSS. Unfortunately, the background and border colors do not change, and the border width is too wide. I'm not sure how I can change the style.

    //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"
    />

Answer 1

Found this while trying to solve the same problem myself and figured I'd put this here for anyone else coming from Google.

I am using the PhoneInputWithCountry from 'react-phone-number-input/react-hook-form' and Tailwind. The easiest way I found to style the input itself was by passing some Tailwind classes to the numberInputProps as below.

<PhoneInputWithCountry
  name="phone" // whatever your name for react-hook-form is
  control={control} // from react-hook-form
  numberInputProps={{
    className: 'rounded-md px-4 focus:outline-none...' // my Tailwind classes
  }}
/>

Exact documentation here, as well as explanations of all of the other props the input will accept. I found this much easier than providing my own custom input. Hopefully this helps :)