css - react 选择中的选项框宽度大小更改

Question

我想更改 react-select 选项框的宽度。这里的例子=>

如果我的内容大于选项，它会显示水平滚动，但我不想要水平滚动。如何更改选项框宽度的大小？

另一件事是如何将所选值显示为 CscID，一个偶数选项框显示 CscID + CscDesc？现在，当我选择该选项时，其 CscID + CscDesc 会显示在所选框中。

这是我的选择=>

const formatOptionLabel = ({ CscID, CscDesc }) => (

            <div style={{ display: "flex"}}>
                <div>{CscID}</div>                
                <div>{CscDesc}</div>
            </div>
            );

const customStyles = {
                control: styles => ({ ...styles, }),
                option: (styles) => {

                  return {
                    ...styles,

                   width: '10000px',  //For testing                 

                  };
                },

              };

<Select 
        styles={customStyles} 

            formatOptionLabel={formatOptionLabel}
            getOptionValue={option =>
                `${option.CscID}`
              }
            options={datasource}            

        />

Answer 1

是的，我可以编辑选项框的宽度。

const customStyles = {
                control: styles => ({ ...styles,                 

                }),
                option: styles => ({ ...styles,                 

                }),
                menu: styles => ({ ...styles,                 
                 width: '500px'
                })                 

              };

根据文档，它叫做菜单。如果您想更新其他样式，请查看此处=> Style Keys

这个选项对于检查菜单框非常有帮助 => menuIsOpen={true}