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.

    //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"
    />
cssreactjstailwind-cssreact-hook-form

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

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 №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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble figuring out why this React Router setup is not functioning properly. Can anyone provide any insights

As I delve into react routing practice, I've put together a geography-based web app. Starting off, I configured the router paths: import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { BrowserRo ...

javascriptreactjsreact-routerreact-router-dom

Encountering issues with upgrading to Webpack 5

Currently, I am in the process of upgrading from Webpack 4 to Webpack 5. However, when I execute npm start, I encounter this error message. The interesting part is that I have not used applyWebpackOptionsDefaults anywhere in my code, but upon searching thr ...

node.jsreactjswebpackcreate-react-appwebpack-dev-server

Issues with Passing Props for Mutation and Query Components- OR -Mutations and Queries

Whenever my handler is triggered, an error pops up stating that the mutation is not a function. Strangely, I noticed that my mutation and query are not being linked to my component when I check this.props. ERROR: RelationshipDropDown.js:58 Uncaught Type ...

reactjsgraphqlapollo

Unable to display background image on Webpage due to blank page issue while uploading it with HTML and CSS

I've been attempting to build a webpage with an image as the background, but I seem to be facing some issues. Instead of seeing the desired image, all I get is a blank white page. The folder named "images" is located in the same directory as my HTML a ...

htmlcss

Position the image in the center of the div both horizontally and vertically

At the moment, I have a header division with two sub-divisions called header-top and header-bottom. I am attempting to position my logo in the top-header section and align it both vertically and horizontally. The logo is aligning correctly horizontally, bu ...

htmlimagecss

Encountering SUID Sandbox Helper Issue When Running "npm start" on WSL with Electron and Typescript

Can anyone help me with this issue? I have Node v8.10.0 and I'm attempting to follow a beginner tutorial on Electron + Typescript which can be found at the following link: https://github.com/electron/electron-quick-start-typescript Here is the full e ...

node.jsreactjstypescriptnpmelectron

Type of Multiple TypeScript Variables

Within my React component props, I am receiving data of the same type but with different variables. Is there a way to define all the type variables in just one line? interface IcarouselProps { img1: string img2: string img3: string img4: string ...

reactjstypescriptnext.jsreact-typescript

Guide on switching to night mode in Vue JS and Tailwind CSS

I am looking to implement dark mode in Vue JS and Tailwind CSS using the Dark class in Tailwind. I have some ideas but I'm not sure how to proceed. I want to experiment with toggling classes based on a condition like v-if ="isDark === true" to activat ...

vue.jsvuejs3tailwind-cssvue-composition-api

Having trouble with exporting static HTML using Next.js

Recently, I have completed a project and now I am looking to export it to static HTML. In order to achieve this, I added the following command in my package.json file: build" : "next build && next export Upon running the command npm run ...

javascriptreactjsnext.js

Error: The specified module cannot be found. The client package path is not exported from the package

I've encountered an issue while using Next.js and NextAuth with Nginx. My build is failing, and I'm unsure of how to resolve this specific error. 2021-12-06T09:35:02.4779281Z https://nextjs.org/telemetry 2021-12-06T09:35:02.4779648Z 2021-12-06T ...

reactjsnext.jsazure-pipelinesnext-auth

Steps to insert an image into my source code when it is selected

One of the challenges I'm facing is trying to update the display of images in my src when a user selects a new image from my file input field. Initially, I set my img src in my React app like this: src={"http://localhost:3000/" + this.props.file}, whe ...

reactjs

Looking to target an element using a cssSelector. What is the best way to achieve this?

Below are the CSS Selector codes I am using: driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg-technik='append_numbers']")).click(); driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg- ...

javascriptjquerycssselenium

Is there a way to automatically deselect the checkbox in the selectableRows of mui-datatables when there are no data rows present?

When there is data, everything works smoothly. However, when there is no data, it gets selected by default. Below is the code snippet for the options: const options = { selectableRows: "multiple", //selectableRowsOnClick: true, rowsSelected: thi ...

reactjsmaterial-uimui-datatable

Personalize the appearance of material UI Switch when it is both checked and disabled

Struggling with applying styles to a Material UI Switch component in React when it's disabled. I've attempted to use withStyles for this purpose, and while the styling for checked vs unchecked states and the track are working fine, I can't s ...

reactjsmaterial-ui

Adaptable arrow-shaped progress bar featuring sleek transparent borders

I am currently working on creating a progress bar similar to those commonly found in checkout processes. One issue I have encountered is that the borders between the arrows appear transparent, and the entire design needs to be responsive. So far, I have m ...

htmlcsssassprogress-bar

Issues with hover menu arise following relocation of primary menu

#header { height: 108px; width: 1140px; background-color: #faa220; position: relative; } #Logo2 { height: 108px; float: left; } #header links { height: 50px; float: left; list-style: none; padding-top: 10px; } #container { overflo ...

htmlcss

Tips for managing onClick events within a conditional component

I am currently attempting to implement an onClick event on the data that I have selected from the AsyncTypeahead. My goal is to pass a callback function to the Problem component, which will only render if an item has been selected. However, after selecting ...

javascriptreactjsnext.jsbootstrap-typeahead

The useMutation function trapped in an endless loop

I've been encountering an issue while running a query to save an entity in the database using usemutation. The saveVisa() mutation seems to be stuck in an infinite loop, creating the same element multiple times without any clear reason. import {React, ...

javascriptnode.jsreactjsnext.js

After being deployed on Vercel, React is mistakenly redirecting to the incorrect file, although it functions properly when

I'm a beginner in JavaScript and I recently created a React project. Everything was working smoothly in local development until I deployed the project on Vercel. The issue is when a user clicks on the "about button," instead of showing 'about.htm ...

javascriptreactjs

What methods can be used to accomplish this effect using CSS and/or Javascript?

Is there a way to achieve the desired effect using just a single line of text and CSS, instead of multiple heading tags and a CSS class like shown in the image below? Current Code : <h2 class="heading">Hi guys, How can i achieve this effect using j ...

javascripthtmlcssnewline