css - 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'            
        })
    }  

谢谢

标签： cssreactjsreact-select

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

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

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

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

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