react select 删除边框和框阴影

Question

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

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

我正在尝试删除边框，尝试使用上面的代码片段，但边框和阴影保持不变

同样，当点击 select 时，我需要覆盖点击时的蓝色背景

我怎样才能做到这一点

Answer 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

中用于设置样式的组件列表

react select 删除边框和框阴影

react select removing the border and box shadow

reactjs

react-select