Question

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

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

这是样式道具。

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

以下是问题列表，以及是否有人可以帮助您解决这些问题。请参考所附图片。

注意下拉菜单和选项之间的间隔（当您单击下拉菜单以打开选项时）
- 如果您在这里http://jedwatson.github.io/react-select/看到的话，没有任何缝隙，但是您也看不到源代码。单击源链接将显示404。
- 这里的所有演示https://react-select.com/styles都存在此差距问题。
顶部和底部之间有一个空白间隙（在选项本身内）。这与第1点中提到的下拉菜单的差距不同。该差距是透明的，显示出背后的原因。这是白色的。
较长的文本导致出现选项，导致整个选项框中出现奇怪的空格问题。有没有办法剪裁文本并将其变成省略号，而不是使选项框变宽并进行水平滚动？
与上述问题有关。如何关闭水平滚动。想要剪裁文本。
关于使用className属性的问题，确实可以应用该类。但是，只有最高的div之一。它不适用于子级div，后者最终在backgroundColor中保持白色。

react-select-styling-issues

Answer 1

在下面的live example中，您将找到针对您不同观点的答案。

您可以通过编辑如下样式的JS样式来解决您提到的前4点：

 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
    })
  };

对于最后一个，由于应该使用className道具通过JS对选择进行样式设置，因此只会像上述here那样在外部容器上放置一个类。如果确实需要，您仍可以在组件前加上classNamePrefix前缀，但这实际上并不能帮助您进行样式设置。

使用样式道具反应选择样式问题

1 个答案: