反应选择：背景颜色不会填满 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"}),