React MUI 自定義 Autocomplete 的 Popper 組件

Question

我想自定義自動完成組件附帶的 Popper 的寬度。 在我的例子中，Autocomplete 組件被放置在一個父組件中，旁邊是一個 TextField。

這里是 Codesandbox 上的片段：

目前我有以下內容：

父組件背景顏色設置為綠色。

我的目標：Autocomplete Popper 組件應該覆蓋整個綠色區域，換句話說，由父組件分隔的整個區域（因此也是 TextField）。

編輯 1：在 Amr Eraky 回答之后（解決寬度問題）

編輯 2：因此，預期的行為如下（對不起，我的圖形技能不佳，我希望它是可以理解的）：

所以，我們這里有兩個問題：

1. 寬度
2. 安置

至於寬度，我可以使用以下代碼設置自定義寬度：

    const PopperMy = useCallback((props) => {
        return (<Popper {...props} style={{ width: 350 }} placement='right-end' />)
    },
 []);

但是正如你所看到的，這不是響應式的，它甚至沒有以某種方式綁定到父組件的寬度，所以這不是一個好方法。

至於放置，我希望 popper 與其父級重疊，但在放置選項中我找不到這樣的東西，每個選項都不允許重疊。

您能否提出解決這些問題的方法？

Answer 1

您應該使用Popper的anchorEl來設置 popper 的位置。

anchorEl：類型：HTML 元素 | 對象 | 功能
HTML 元素、virtualElement 或返回其中任何一個的函數。 它用於設置popper的位置。 返回值將作為 Popper 實例的引用對象傳遞。

您可以使用anchorEl獲取任何元素的useRef ，
但是由於您的錨元素在其他組件中，您可以使用id
並將Popper的高度設置為anchorEl的高度。

const PopperMy = React.useCallback((props) => {
    const anchorEl = document.getElementById('new1');   // Or any other element
    return <Popper {...props} anchorEl={anchorEl} style={{ width: anchorEl.clientWidth }} placement='bottom' />;
}, []);