如何更改 React 电话号码输入字段的默认样式

Question

如何使用 https://www.npmjs.com/package/react-phone-number-input 覆盖react-phone-number-input组件的样式？

除了这个组件之外，我还使用了 React Hook Form 和 Tailwind CSS。不幸的是，背景和边框颜色没有改变，而且边框宽度太宽。我不知道如何改变风格。

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

在尝试自己解决同样的问题时发现了这个，并想我会将其放在这里供来自 Google 的其他人使用。

我正在使用“react-phone-number-input/react-hook-form”和 Tailwind 中的 PhoneInputWithCountry。我发现设置输入本身样式的最简单方法是将一些 Tailwind 类传递给 numberInputProps，如下所示。

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

确切的文档这里，以及输入将接受的所有其他道具的解释。我发现这比提供我自己的自定义输入要容易得多。希望这有帮助:)

Answer 2

我认为你不能设置班级。因为组件样式会覆盖它们。您可以像这样设置

style

属性。并确保也导入组件样式。

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

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

Answer 3

我遇到了同样的问题，所以我在 inputProps 中注入了 tailwind css 并且它起作用了

在此输入图片描述

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

我希望这会对我使用库在我的 globalCSS 文件中提供的类的人有所帮助，例如选择组件有一个类

.PhoneInputCountrySelect { 宽度：100%; 边框：无；
背景：白色； 字体大小：14px； 内边距：8px； 颜色：#333； }