如何更改 React Phone 数字输入字段的默认样式

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

我认为你无法设置类。因为组件样式会覆盖它们。您可以像这样设置 style 属性。并确保也导入组件样式。 import 'react-phone-number-input/style.css'

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

如何更改 React Phone 数字输入字段的默认样式

How to change default style of React Phone Number input field

css

reactjs

tailwind-css

react-hook-form