React-select: цвет фона не заполняет всю ширину на wordWrap: "прокрутка"

Question

Я пытаюсь использовать реагировать на выбор в одном из моих проектов. wordWrap должно быть "scroll" .Однако если длина параметра превышает ширину меню и если я прокручиваю вправо, цвет при наведении не заполняет до полной ширины.

Ниже приведен код для справки.Взято из 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
    },
    {
      label:
        "supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious",
      value: 6
    }
  ];

  return (
    <div className="App">
      <Select styles={customStyles} options={options} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Я довольно новичок, чтобы реагировать и развивать интерфейс.Может кто-нибудь, пожалуйста, помогите мне в этом?Заранее спасибо.

Answer 1

Эта проблема была вызвана в следующем сообщении другим пользователем.

Измените wordWrap: 'normal' на wordWrap: 'break-word', как в этом примере https://codesandbox.io/s/jj3r81l3.

Полный стиль реквизита:

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

Answer 2

Вы должны использовать переполнение текста, пробелы и переполнение вместо переноса слов: замените объект menu на этот:

menu: base => ({
  ...
  // wordWrap: "normal",
  whiteSpace: "nowrap",
  overflow: "hidden",
  textOverflow: "ellipsis"
}),