Changing React Phone Number input field's default style: A step-by-step guide

Question

Changing React Phone Number input field's default style: A step-by-step guide

Is there a way to modify the appearance of the react-phone-number-input component using this npm package: https://www.npmjs.com/package/react-phone-number-input?

I am working with React Hook Form and Tailwind CSS alongside this component. However, I'm facing issues with changing the background and border colors, as well as adjusting the border width. I am uncertain about how to customize the style.

https://i.sstatic.net/T4l0C.png

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

css reactjs tailwind-css react-hook-form

Answer 1

Answer №1

Setting classes may not work due to component styles overriding them. Instead, you can use the style prop to customize the appearance. Don't forget to import the component styles as well using

import 'react-phone-number-input/style.css'

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

Answer 2

Setting classes may not work due to component styles overriding them. Instead, you can use the style prop to customize the appearance. Don't forget to import the component styles as well using

import 'react-phone-number-input/style.css'

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

Answer 3

Answer №2

While troubleshooting a similar issue, I stumbled upon this solution and thought it would be helpful to share here for others who might be searching on Google.

In my case, I utilized the PhoneInputWithCountry component from 'react-phone-number-input/react-hook-form' along with Tailwind CSS. To easily style the input field, I passed some Tailwind classes to the numberInputProps as shown below.

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

You can find detailed documentation here, including explanations of all other input props that can be used. This approach saved me time compared to creating a custom input field. Hopefully this tip proves useful to you as well :)

Answer 4

While troubleshooting a similar issue, I stumbled upon this solution and thought it would be helpful to share here for others who might be searching on Google.

In my case, I utilized the PhoneInputWithCountry component from 'react-phone-number-input/react-hook-form' along with Tailwind CSS. To easily style the input field, I passed some Tailwind classes to the numberInputProps as shown below.

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

You can find detailed documentation here, including explanations of all other input props that can be used. This approach saved me time compared to creating a custom input field. Hopefully this tip proves useful to you as well :)

Answer 5

Answer №3

I encountered a similar issue and found success by incorporating tailwind css directly into the inputProps

view image details here

<div>
  <label htmlFor="phone" className="block text-sm font-medium text-gray-700">Phone Number: 
     <PhoneInput 
        id="phone" 
        name="phone" 
        country={'us'}
        value={phoneNumber} 
        onChange={handleChange}
        inputProps={{
            required:true,
            className:"bg-opacity-50 text-gray-950 mt-2 block border rounded-md border-gray-700 h-[48px] w-[450px] pl-[45px] pr-[12px] justify-between shadow-sm focus:border-gray-300 focus:ring focus:ring-gray-200"
}}
                                    
/>
</label>

Answer 6

I encountered a similar issue and found success by incorporating tailwind css directly into the inputProps

view image details here

<div>
  <label htmlFor="phone" className="block text-sm font-medium text-gray-700">Phone Number: 
     <PhoneInput 
        id="phone" 
        name="phone" 
        country={'us'}
        value={phoneNumber} 
        onChange={handleChange}
        inputProps={{
            required:true,
            className:"bg-opacity-50 text-gray-950 mt-2 block border rounded-md border-gray-700 h-[48px] w-[450px] pl-[45px] pr-[12px] justify-between shadow-sm focus:border-gray-300 focus:ring focus:ring-gray-200"
}}
                                    
/>
</label>

Changing React Phone Number input field's default style: A step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Mastering React.js: How to Efficiently Pass Parameters to Event Handlers in Components without Using bind()

Tips for making immutable state changes in React

Using TypeScript 4.1, React, and Material-UI, the className attribute does not support the CSSProperties type

"Encountering issue with Material UI Autocomplete where values are showing up

The combination of Material UI nested theme providers can disrupt the functionality of the withStyles H

Is there a way to create an input field that accepts only numbers and behaves like a password field simultaneously?

Managing state arrays in React JS: A guide to efficiently adding and removing items using a single function

Ways to center Bootstrap panel in the middle of a webpage

Steps for setting a background image for a div

Show drawer when modal is open in React Native

Tips for perfectly aligning all elements in a row within a card design

How to Customize Password Input Fields in HTML

When the ajax response comes in, my javascript code seems to suddenly stop

javascript implementing optional chaining for a single parameter

Just starting out with JavaScript - updating the appearance of an element

Navigation is failing to float in the correct position

Verify whether a specific value exists in my React array; if it does, display a specific component

Expanding SVG Button Overlay in ChakraUI

What is the best way to show unique content when a specific button is clicked from a group of buttons in Material UI and React?

The component you are trying to import requires the use of useState, which is only compatible with a Client Component. However, none of the parent components have been designated with the "use client" tag