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' />;
}, []);