反应选择删除焦点边框

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

谢谢

Answer 1

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

1. 使用state

   control: base => ({
       ...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, state) => ({
      ...base,
      border: '0 !important',
      // This line disable the blue border
      boxShadow: '0 !important',
      '&:hover': {
          border: '0 !important'
       }
   })
   

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

这里是live example。

Answer 2

这对我有用：

control: (base, state) => ({
    ...base,
    border: '1px solid black',
    boxShadow: 'none',
    '&:hover': {
        border: '1px solid black',
    }
})

这将确保在不活动，悬停或活动但没有蓝框阴影时仍保留边框。

Answer 3

这绝对有效：

const style = {
    control: (base) => ({
      ...base,
      boxShadow: "none"
    })
}