title: How to change default style of React Phone Number input field
body: <p>How can I override the style of the react-phone-number-input component using <a href="https://www.npmjs.com/package/react-phone-number-input" rel="nofollow noreferrer">https://www.npmjs.com/package/react-phone-number-input</a>?</p>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/T4l0C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T4l0C.png" alt="Field Image" /></a></p>
  <pre><code>    //React hook form
      const {
          register,
          handleSubmit,
          watch,
          formState: { errors },
          control,
        } = useForm();
  
  
      //Component
      &lt;PhoneInputWithCountry
        international
        name=&quot;phone&quot;
        control={control}
        defaultCountry=&quot;BD&quot;
        country=&quot;BD&quot;
        id=&quot;phone&quot;
        className=&quot;rounded rounded-full bg-gray-100 py-1 px-2 text-gray-700 shadow-sm border-green&quot;
      /&gt;
  </code></pre>