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

Question

我试图覆盖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
      }),
    }}
  />;

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

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

我怎样才能做到这一点

Answer 1

如果你想去掉整个选项列表的边框，那么你需要在menu组件上设置样式，而不是在option组件上设置样式。

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