使用样式propsreact选择样式问题

IT技术 reactjs react-select
2021-04-26 11:07:02

我想使用 react-select 并在将页面背景颜色从白色更改为自定义后遇到了一系列问题。（问题在白色背景上并不像在 react-select 的 github 页面上那么明显）

我正在通过样式props执行上述操作，因为 className props无法正常工作。

这是样式props。

const colourStyles = {
    control: styles => ({ ...styles, backgroundColor: '#023950', color: 'white', border: 0 }),
    option: (styles) => {
        return {
            backgroundColor: '#023950',
            color: 'white'
        };
    },
    singleValue: styles => ({ ...styles, color: 'white' }),
};

这是问题列表，如果有人可以帮助解决这些问题。请参考附图。

  1. 注意下拉菜单和选项之间的差距（当你点击下拉菜单打开选项时）
  2. 顶部和底部有一个白色间隙（在选项本身内）。这与第 1 点中提到的下拉列表中的间隙不同。该间隙是透明的，显示了后面的内容。这个是白色的。
  3. 长文本导致选项导致整个选项框出现奇怪的空白问题。有没有办法剪辑文本并将其变成省略号而不是使选项框更宽并具有水平滚动？
  4. 与上述问题有关。如何关闭水平滚动。想要文本剪辑。
  5. 关于使用 className props的问题，该类确实得到应用。然而，只有 1 个最上面的 div。它不适用于子 div，它最终在 backgroundColor 中保持白色。

react选择样式问题

3个回答

在下面的示例中，您将找到不同观点的答案。

您提到的前 4 点可以通过编辑 style-in-JS 来解决，如下所示：

 const customStyles = {
    control: (base, state) => ({
      ...base,
      background: "#023950",
      // match with the menu
      borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
      // Overwrittes the different states of border
      borderColor: state.isFocused ? "yellow" : "green",
      // Removes weird border around container
      boxShadow: state.isFocused ? null : null,
      "&:hover": {
        // Overwrittes the different states of border
        borderColor: state.isFocused ? "red" : "blue"
      }
    }),
    menu: base => ({
      ...base,
      // override border radius to match the box
      borderRadius: 0,
      // beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
      hyphens: "auto",
      // kill the gap
      marginTop: 0,
      textAlign: "left",
      // prevent menu to scroll y
      wordWrap: "break-word"
    }),
    menuList: base => ({
      ...base,
      // kill the white space on first and last option
      padding: 0
    })
  };

在过去的一个，作为选择应该是使用通过JS风格的classNameprops只能将一类外容器上提到这里。如果您真的想要，您仍然可以为组件添加前缀，classNamePrefix但它不会真正帮助您进行样式设置。

你应该试试看

const colourStyles = {
menuList: styles => ({
    ...styles,
    background: 'papayawhip'
}),
option: (styles, {isFocused, isSelected}) => ({
    ...styles,
    background: isFocused
        ? 'hsla(291, 64%, 42%, 0.5)'
        : isSelected
            ? 'hsla(291, 64%, 42%, 1)'
            : undefined,
    zIndex: 1
}),
menu: base => ({
    ...base,
    zIndex: 100
})
}

    const options = [
    {value: 'chocolate', label: 'Chocolate'},
    {value: 'strawberry', label: 'Strawberry'},
    ]

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

这段代码解决了我的问题

const colourStyles = {
 menuList: styles => ({
...styles,
background: 'papayawhip'
   }),
option: (styles, {isFocused, isSelected}) => ({
...styles,
background: isFocused
    ? 'hsla(291, 64%, 42%, 0.5)'
    : isSelected
        ? 'hsla(291, 64%, 42%, 1)'
        : undefined,
zIndex: 1
}),
menu: base => ({
...base,
zIndex: 100
  })
}

const options = [
{value: 'chocolate', label: 'Chocolate'},
{value: 'strawberry', label: 'Strawberry'},
]

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

谢谢..

其它你可能感兴趣的问题
上一篇Delta 3D 打印机的清洁或擦拭移动 下一篇印刷品周围的“轮廓”的目的是什么？