react-select change menu height

Question

有增加菜单高度的方法吗？我可以用maxMenuHeight属性来降低菜单的高度。但是我找不到增加它高度的方法。我甚至尝试了minMenuHeight属性，但这并不能奏效。这是我的代码和自定义样式：

const defaultStyles = {
control: (base, state) => ({
...base,
}),
menu: base => ({
...base,
}),
menuList: base => ({
...base,
})
}
const customStyles = {
control: (base, state) => ({
...base,
background: "#000000",
// match with the menu
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
// Overwrittes the different states of border
// Removes weird border around container
boxShadow: state.isFocused ? null : null,
}),
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 0,
backgroundColor: 'black',
// kill the gap
marginTop: 0
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
})
}

<AsyncSelect
className="basic-single"
classNamePrefix="select"
loadOptions={loadOptions}
maxMenuHeight={500}
isMulti
styles={localStorage.getItem('theme') === 'dark' ? customStyles : defaultStyles}
cacheOptions
onChange={(e) => setSelect(e)}
defaultOptions />

Answer 1

您可以使用样式来实现。

更改

menuList: base => ({
...base,
})

带有

menuList: base => ({
...base,
minHeight: "300px" // your desired height
})

正在CodeSandbox进行演示。