反应选择容器选项宽度

Question

我试一下react-select库，我喜欢它。

我正在使用它，但是我不明白如何更改选项容器的宽度。

我试图查看official react select上的文档，但是找不到关于options容器宽度的正确部分。

有人可以帮我吗:)？

这是我现在的自定义样式：

const customStyles = {
      option: (provided, state) => ({
        ...provided,
        borderBottom: '1px solid #979797',
        width: 219,
        borderRadius: 5,
      }),
      control: () => ({
        // none of react-select's styles are passed to <Control />
        width: 219,
        border: '1px solid #979797',
        display: 'flex',
        borderRadius: '5px',
      }),
      valueContainer: (provided) => ({
        ...provided,
        width: 219,
      }),
    }

Answer 1

Menu组件是您要修改的组件：

menu: (provided, state) => ({
  ...provided,
  width: 50,
}),

Answer 2

您可以通过类似容器的选择器

const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  container: styles => ({ ...styles,  width: 200 })
};

<Select
  defaultValue={colourOptions[2]}
  label="Single select"
  options={colourOptions}
  styles={colourStyles}
/>

Demo