Reactjs ReactSelect 移除焦点边框

发布于10月03日

我不知道如何从react select中移除边框或轮廓(不确定是哪一个).

上传图片供参考.我默认没有边界.

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

谢谢

react Select v3

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

这是live example美元

react Select 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(这一款有效，但我建议使用第一款

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

别忘了重置你得到的boxShadow(蓝色边框).

这是live example美元.