反应选择删除边框和框阴影答案

【问题标题】：react select removing the border and box shadow反应选择删除边框和框阴影
【发布时间】：2020-07-13 10:14:07
【问题描述】：

我正在尝试覆盖 react select options div 的 css，所以在最新的 react-select v2 中，我们可以将其作为样式传递

 <Select
    styles={{
      option: (provided) => ({
        ...provided,
        backgroundColor: '#fff',
        border: null, // tried border: 'none'
        boxShadow: null, // tried border: 'none'
        outline: 0
      }),
    }}
  />;

我正在尝试删除边框，尝试使用上面的 sn-p 但边框和阴影保持不变

当点击选择时，我需要在点击时覆盖蓝色背景

我怎样才能做到这一点

【问题讨论】：

标签： reactjs react-select

【解决方案1】：

如果要移除整个选项列表的边框，则需要在menu 组件上设置样式，而不是在option 组件上。

另外，要覆盖 Select 输入组件的样式，您需要在 control 组件上设置样式

你可以试试这个-

<Select
  styles={{
    control: (provided, state) => ({
      ...provided,
      boxShadow: "none",
      border: state.isFocused && "none"
    }),
    menu: (provided, state) => ({
      ...provided,
      border: "none",
      boxShadow: "none"
    }),
    option: (provided, state) => ({
       ...provided,
       backgroundColor: state.isFocused && "lightgray",
       color: state.isFocused && "red"
    })
  }}
  ...
/>

这里是react-select - https://react-select.com/styles#style-object中用于设置样式的组件列表

【讨论】：

感谢 Arpitha，菜单 css 工作正常，但是当您单击选项时，蓝色 css 效果正在应用我如何删除那个
您可以在option 组件获得焦点时为其添加样式。我已经用option 组件的示例样式更新了我的答案。
@Arpitha 有一个疑问，在多选中，当我们选择输入字段时选择了选项，是否有一种方法可以在菜单中选择选项并且选项不会出现在输入框中？