Css 选择中选项框宽度大小的更改

我想更改

react选择

选项框宽度。 这里的示例=>

如果我的内容大于该选项，则显示水平滚动，但我不希望水平滚动。如何更改选项框宽度的大小

另一件事是如何将所选值显示为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}            

        />

const formatOptionLabel=（{CscID，CscDesc}）=>(
{CscID}
{CscDesc}
);
常量自定义样式={
控件：样式=>（{…样式，}），
选项：（样式）=>{
返回{
…风格，
宽度：“10000px”，//用于测试
};
},
};
`${option.CscID}`
}
选项={datasource}
/>

您通常不会在用例中更改包装元素的宽度。因为文本限制可以是任意的，所以您不会根据文本设置select的宽度，而是根据select的宽度设置文本。这意味着select将具有固定宽度，并且超过固定宽度的文本必须通过类似css的方式转换为省略号

.options-select {
     overflow: ellipsis
}

---

悬停时的省略号必须在工具提示中显示全名，以获得更好的用户体验。

有关重新调整大小的问题，您可以参考此现有答案：

对于第二个问题，我认为使用react Select是不可能的

如果您转到github并进一步查看react Select的源代码，您可能会发现value属性的ValueType应该与options的Type相同

• 准确地说，代码是“

  export-type-ValueType=OptionType | OptionType | null | void；

  ”，可以在react-select/packages/react-select/src/types.js中找到

• 为方便起见，这是指向其源代码的链接，可以帮助您找出更多隐藏的行为：

---

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

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

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

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

              };

根据文档，它被称为菜单。如果要更新其他样式，请选中此处=>

这个选项对于检查菜单框=>

menuIsOpen={true}