css 使MUI自动完成断开长单词以适合布局

ars1skjm  于 2023-03-05  发布在  其他
关注(0)|答案(1)|浏览(82)

这是我第一次使用mui自动完成功能,在我的例子中,我用它来处理用户名,用户名只能有一定的长度,但由于大小限制,它可能不适合自动完成视图。

正如您在沙箱和图像中所看到的,如果单词太长,它们就会被切断。
因此,我正在寻找一种方法来扩大下拉菜单的宽度,当它被点击时,取决于选项字符串的长度或实现一个断字太长的话。
正如在沙盒中所看到的,我尝试了使用不同的方法使文本溢出或将单词断成新行,但直到现在都没有成功。
Sandbox-Example
谁能告诉我如何解决这个问题?

qojgxg4l

qojgxg4l1#

通过将componentProps添加到传递到“自动完成”的列表属性中,修复了此问题。
这使得包含用户名的下拉菜单比输入字段宽,并保证宽度与最大用户名长度或固定长度相对应,如我的代码所示。

<Autocomplete
        id="select_user_history"
        options={users}
        value={selectedUser}
        // --------
        // following block solves it
        componentsProps={{
            paper: {
                sx: {
                    width: 160
                }
            }
        }}
        // --------
        getOptionLabel={e => e.name}
        .....
        )}
    />

相关问题