React-select 容器选项宽度

Question

我尝试了 react-select 库，我喜欢它。

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

我试图查看 official react select 上的文档，但我没有找到关于选项容器宽度的正确部分。

有人可以帮助我 :) 吗？

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

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

React-select 容器选项宽度

React-select container option width

select

reactjs

react-select