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

IT技术 reactjs react-select
2021-05-03 00:40:12

如何在菜单下拉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"
  />

在此处输入图像描述 https://codesandbox.io/s/react-codesandboxer-example-90zz6

3个回答

您应该menuList根据 react-select docs设置样式键的样式。

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

margin-top菜单列表和选择框之间的默认值可以使用如下props轻松删除styles：

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

活生生的例子在这里。

通过使用 {[firststyle,secandstyle]} 使用此使用多内联样式，并将第一个样式下方的第二个样式定义为以下形状 

 `const nopadinng={
      paddingTop:0};`

and remove  the classname

    // remove the className 
        className="basic-multi-select"


    const nopadinng={
      paddingTop:0};
            styles={[customStyles,nopadinng]}
其它你可能感兴趣的问题
上一篇reactpubnub聊天。消息重复或根本没有消息 下一篇将 FabricJS 与 React-Native 结合使用