如何设置react-phone-number-input输入框聚焦时边框为无？

我使用react-phone-number-input组件实现电话号码输入框，代码如下：

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

样式采用官方提供的默认样式文件，尝试通过以下CSS修改输入框聚焦状态的边框和外轮廓：

.PhoneInputInput:focus-visible {
    border: none;
    outline: none;
}

但修改后聚焦时并未生效，输入框聚焦时仍显示默认的蓝色边框和外轮廓。

出现这个问题通常是因为自定义样式的优先级低于组件内置样式，可以通过以下几种方式解决：

• 提升选择器优先级
  给输入框外层添加自定义容器类，使用更具体的选择器覆盖内置样式，示例代码如下：

  .custom-phone-input-container .PhoneInputInput:focus-visible {
      border: none !important;
      outline: none !important;
  }
  

  对应组件代码：

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

  注：!important是优先级最高的覆盖方式，若无需强制覆盖可省略。

• 切换聚焦伪类
  部分浏览器或组件内部可能使用:focus而非:focus-visible处理聚焦样式，尝试替换伪类：

  .PhoneInputInput:focus {
      border: none;
      outline: none;
  }
  

• 使用组件自带的自定义类名API
  该组件支持通过inputClassName属性直接为输入框绑定自定义类名，从根源避免选择器优先级冲突：

  <PhoneInput
      defaultCountry={"CA"}
      placeholder={"Phone"}
      value={phone}
      onChange={(value: string) => setPhone(value)}
      inputClassName="custom-phone-input-field"
  />
  

  对应CSS：

  .custom-phone-input-field:focus-visible {
      border: none;
      outline: none;
  }
  

内容的提问来源于stack exchange，提问作者tiennl