reactjs - react-select 改变菜单高度

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 />

标签： reactjsreact-select

Answer 1

你可以用样式来做到这一点。

更改

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

和

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

在CodeSandbox工作演示。