亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

反應選擇:背景顏色不會填滿 wordWrap 上的全寬:“滾動”

反應選擇:背景顏色不會填滿 wordWrap 上的全寬:“滾動”

慕娘9325324 2021-06-29 13:02:50
我正在嘗試在我的一個項目中使用 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    },我對反應和前端開發相當陌生。有人可以幫我嗎?提前致謝。
查看完整描述

2 回答

?
慕尼黑的夜晚無繁華

TA貢獻1864條經驗 獲得超6個贊

您應該使用文本溢出、空白和溢出而不是自動換行:將您的menu對象更改為:


menu: base => ({

  ...

  // wordWrap: "normal",

  whiteSpace: "nowrap",

  overflow: "hidden",

  textOverflow: "ellipsis"

}),


查看完整回答
反對 回復 2021-07-01
  • 2 回答
  • 0 關注
  • 142 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號