如何删除菜单下拉 react-select 中的顶部和底部填充？

Question

我已经根据此处给出的答案进行了尝试：. But this doesn't work for me. The space is also bigger than most examples found on 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 以暂停脚本执行。

如何删除菜单下拉 react-select 中的顶部和底部填充？

How to remove the padding top and bottom in menu drop-down react-select?

reactjs

react-select