使用 react-phone-number-input 时如何为电话输入的边框颜色设置无

Question

我正在使用反应电话号码输入。这是电话号码字段：

<PhoneInput
    defaultCountry={"CA"}
    placeholder={"Phone"}
    value={phone}
    onChange={(value: string) => {
       setPhone(value);
    }}
/>

和 css 来自： https://gitlab.com/catamphetamine/react-phone-number-input/-/blob/master/style.css

我将 PhoneInputInput 的边框和轮廓设置为无，但在焦点时它不起作用。

.PhoneInputInput:focus-visible {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
}

这是该字段的图像：

Answer 1

好像是reactjs默认输入导致的。我将其添加到 globals.css 文件中：

.input-phone-number input:focus{
    outline: none !important;
    border:none !important;
    box-shadow: none !important;
}

并在 PhoneInput 字段中使用它，然后它对我有用：

<PhoneInput
    defaultCountry={"CA"}
    placeholder={"Phone"}
    value={phone}
    onChange={(value: string) => {
       setPhone(value);
    }}
    className={"input-phone-number"}
/>