反应选择删除焦点边框

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您得到的（蓝色边框）。

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

Answer 2

这对我有用：

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

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

Answer 3

对于任何使用react-selectwith的人来说@tailwindcss/forms，输入上可怕的蓝线（又名框阴影）是由表单插件引入的。您需要传递strategy: class到文件中的表单插件tailwind.config.js。

plugins: [
  ...
  require('@tailwindcss/forms')({
    strategy: 'class',
  }),
]

更多相关信息： https: //github.com/tailwindlabs/tailwindcss-forms#using-only-global-styles-or-only-classes

类似问题：/sf/answers/5287928551/

Answer 4

这绝对有效：

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