React-Select 移除焦点边框答案

【问题标题】：React-Select Remove focus borderReact-Select 移除焦点边框
【发布时间】：2019-03-07 22:22:38
【问题描述】：

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

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

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

谢谢

【问题讨论】：

请添加相关代码sn-p。已经有大量关于如何隐藏边框或轮廓的示例stackoverflow.com/questions/1457849/…
@SuperDJ 我认为确实没有相关的代码 sn-p。我需要帮助从 React-Select 组件的焦点状态中删除边框/轮廓。我不知道该选择什么或如何调整样式选项。我已经浏览了所有文档和我能找到的所有主题。但这绝对不是从普通组件中删除简单轮廓/边框的问题。
人们，请不要这样做——你最终会排除在使用界面时依赖视觉焦点提示的人（例如使用键盘导航）。唯一应该这样做的时候是当您想替换焦点样式为您自己的

标签： css reactjs react-select

【解决方案1】：

反应选择 v3

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

这里是live example

反应选择 v2

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

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

使用!important（这个可行，但我建议使用第一个解决方案，!important 从来都不是好东西）

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

别忘了重置你得到的boxShadow（蓝色边框）。

这里是live example。

【讨论】：

这个解决方案有点过分（虽然有效），使用boxShadow: 'none'就足够了
@AlexDobrushskiy 取决于您的 react-select 版本，仅删除没有任何内容的 box-shadow 不起作用（特别是在早期 v2 中）
@AlexDobrushskiy 我已经为react-select的新版本编辑了我的答案
在此答案的开头添加免责声明以告诉开发人员他们不应该这样做是否有意义，除非他们自己替换焦点样式？这是一个可访问性问题

【解决方案2】：

这对我有用：

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

这将确保边框在非活动、悬停或活动时保持不变，但没有蓝色框阴影。

【讨论】：

【解决方案3】：

这个肯定有效：

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

【讨论】：