如何在菜单下拉react-select中删除padding-top?

本文介绍了如何在菜单下拉react-select中删除padding-top?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

how to remove padding-top in menu drop-down react-select?

const customStyles = {

    indicatorSeparator: styles => ({ ...styles, display: "none" }),
    option: (provided, state) => ({
      ...provided,
      fontSize: 16,

        height:"40px",
      paddingLeft: "11px",
      ":firstChild": {
        margin: "10px",
        padding: "10px",
        borderRadius: "10px 10px 10px 10px"

    }),



 <Select
    styles={customStyles}
    defaultValue={[colourOptions[2], colourOptions[3]]}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
  />

在此处输入图片说明 https://codesandbox.io/s/react-codesandboxer-example-90zz6

推荐答案

您应该根据 react-select .

You should set the styles for the menuList style key according to react-select docs.

menuList: (provided, state) => ({
   ...provided,
   paddingTop: 0,
   paddingBottom: 0,
}),

这篇关于如何在菜单下拉react-select中删除padding-top?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！