如何删除菜单下拉菜单中的填充顶部和底部反应选择

Question

我根据这里给出的答案进行了尝试：如何删除菜单下拉菜单中的顶部填充？。但这对我不起作用。这个空间也比上面的大多数例子都大https://react-select.com/styles.我不能在下拉列表中检查元素以查看出了什么问题，这太糟糕了。

我的代码：

const stateOptions = [
{ value: 'All', label: 'ALL' },
{ value: 'SELECT1', label: 'SELECT1' },
{ value: 'SELECT2', label: 'SELECT2' },
{ value: 'SELECT3', label: 'SELECT3' }
]
const options = [
{
options: stateOptions
}
]
const customStyles = {
menu: provided => ({
...provided,
marginTop: 0,
width: '100%',
marginTop: '-1px',

}),
menuList: (provided, state) => ({
...provided,
paddingTop: 0,
paddingBottom: 0,
overflow: 'hidden',
}),
option: (provided, state) => ({
...provided,
height: '55px',
borderBottom: '1px solid #b0b0b0',
color: state.isSelected ? 'white' : '#000000',
background: state.isSelected ? '#e3155c' : 'white',
fontFamily: 'Qanelas-Regular',
fontSize: '16px',
padding: '15px',
':hover': {
...provided[':active'],
backgroundColor: '#e3155c',
color: 'white'
},
}),

Answer 1

真正对我有用的是：

group: provided => ({
...provided,
paddingTop: 0,
}),

尝试检查代码的方法是按下F8以暂停脚本执行。