這是我第一次使用Material-UI自動完成功能。 在我的例子中，我使用用戶名，用戶名只能有一定的長度，但由于大小限制，它可能不適合自動完成視圖。

正如你在沙盒和圖像中看到的，如果單詞太長，就會被截斷。

因此，我正在尋找一種方法來擴大下拉菜單的寬度，當它被點擊時，根據選項字符串長度或實現太長的單詞斷詞。

正如在沙盒中可以看到的那樣，我嘗試了使用不同的方法來使文本溢出或將單詞換行，但直到現在都沒有成功。

沙盒示例

誰能告訴我如何解決這個問題？

通過將componentProps添加到傳入Autocomplete的列表屬性中修復了該問題。

這使得用戶名下拉列表比輸入字段更寬，并保證寬度符合最大用戶名長度或固定長度，如我的代碼所示。

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