reactjs - 如何删除菜单下拉 react 选择中的填充顶部？

Question

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

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

enter image description here https://codesandbox.io/s/react-codesandboxer-example-90zz6

Answer 1

菜单列表和选择框之间的默认 margin-top 可以使用 Prop styles 轻松移除，如下所示:

const styles = {
  menu: base => ({
    ...base,
    marginTop: 0
  })
}

直播example here .