cssreactjstailwind-cssreact-hook-form

How to change default style of React Phone Number input field

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.

Field Image

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

  • 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, ...}}
   ...
/>