反应选择：背景颜色不会填满 wordWrap 上的全宽：“滚动”

Question

我正在尝试在我的一个项目中使用 react-select。在将wordWrap必须是“滚动”。但是，如果选项长度超过菜单的宽度，并且如果我向右滚动，则悬停颜色不会填充到整个宽度。以下是代码供参考。取自https://codesandbox.io/s/modest-curie-etoj3并进行了一些修改。import React from "react";import ReactDOM from "react-dom";import Select from "react-select";import "./styles.css";function App() {  const customStyles = {    control: (base, state) => ({      ...base,      width: 300,      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,      width: 300,      // 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: "normal"    }),    menuList: base => ({      ...base,      // kill the white space on first and last option      padding: 0    })  };  const options = [    {      label: "option 1 akjbalskej",      value: 1    },    {      label: "option 2 akjbalskej",      value: 2    },    {      label: "option 3 akjbalskej",      value: 3    },    {      label: "option 4 akjbalskej",      value: 4    },    {      label: "option 5 akjbalskej",      value: 5    },我对反应和前端开发相当陌生。有人可以帮我吗？提前致谢。

Answer 1

您应该使用文本溢出、空白和溢出而不是自动换行：将您的menu对象更改为：

menu: base => ({

  ...

  // wordWrap: "normal",

  whiteSpace: "nowrap",

  overflow: "hidden",

  textOverflow: "ellipsis"

}),