Question

我已经根据此处给出的答案进行了尝试：how to remove padding-top in menu drop-down react-select?。但这对我不起作用。该空间还比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中删除顶部和底部的填充？

1 个答案: