React-Select 移除焦点边框

Question

我不知道如何从反应选择中删除边框或轮廓（不确定它是哪一个），当它集中时。

上传图片供参考。我默认没有边框。

 customStyle = {
        control: provided => ({
            ...provided,
            height: 10,
            width: 300,
            padding: 10,
            margin: 0,
            marginLeft: 0,
            border: "0px solid black",
            fontSize: 13,
            backgroundColor: 'white',
            outline: 'none'
        })
    }

谢谢

原文由 CosmicSeizure 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

反应选择 v3

 const style = {
  control: base => ({
    ...base,
    border: 0,
    // This line disable the blue border
    boxShadow: 'none'
  })
};

这里有一个 活生生的例子

反应选择 v2

要在 Select 聚焦时重置边框，您有两种解决方案：

1. 使用 state

    control: (base, state) => ({
       ...base,
       border: state.isFocused ? 0 : 0,
       // This line disable the blue border
       boxShadow: state.isFocused ? 0 : 0,
       '&:hover': {
          border: state.isFocused ? 0 : 0
       }
   })

1. 使用 !important （这个可行，但我建议使用第一个解决方案， !important 绝不是一件好事）

    control: base => ({
      ...base,
      border: '0 !important',
      // This line disable the blue border
      boxShadow: '0 !important',
      '&:hover': {
          border: '0 !important'
       }
   })

不要忘记重置您获得的 boxShadow （蓝色边框）。

这里有一个 活生生的例子。

原文由 Laura 发布，翻译遵循 CC BY-SA 4.0 许可协议