如何修改MUI Popover的锚定元素？

问题根源 #

你当前代码的核心问题是：Popover的anchorEl属性需要传入DOM元素实例，但你直接传了createRef()创建的Ref对象，而不是Ref对象的current属性（这里才存储着实际的DOM元素）。

解决方案步骤 #

1. 修正anchorEl的取值 #

将Popover的anchorEl改为anchorRef.current，直接传入目标DOM元素：

<Popover
  open={open}
  anchorEl={anchorRef.current} // 修正这里
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'center',
  }}
>

2. 确保自定义组件能接收Ref #

如果SearchFormContainer是你自己写的自定义组件，需要用React.forwardRef包裹，把Ref传递到组件内部的原生DOM元素上，否则Ref无法绑定到实际DOM：

// 示例：用forwardRef改造自定义组件
const SearchFormContainer = React.forwardRef<HTMLDivElement, YourPropsType>((props, ref) => {
  // 把ref绑定到内部的原生div上
  return <div ref={ref} {...props}>{/* 组件内容 */}</div>;
});

如果SearchFormContainer是MUI的原生组件（比如Box、Container），则无需此步骤，它们本身支持接收Ref。

3. 优化useCallback依赖（可选） #

你的handleClick函数用了函数式更新setOpen(s => !s)，这种写法不需要依赖anchorRef，可以把依赖数组改为空，避免不必要的重渲染：

const handleClick = useCallback(
  (event: MouseEvent<HTMLDivElement, MouseEvent<Element, MouseEvent>>) => {
    setOpen(s => !s);
  },
  [] // 移除anchorRef依赖
);

完整修正代码示例 #

import React, { useState, createRef, useCallback } from 'react';
import { Popover } from '@mui/material';

// 自定义容器组件（用forwardRef处理Ref传递）
const SearchFormContainer = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
  return <div style={{ padding: '16px', border: '1px solid #ccc' }} ref={ref} {...props} />;
});

const SearchComponent = () => {
  const [open, setOpen] = useState(false);
  const anchorRef = createRef<HTMLDivElement>();
  
  const handleClose = () => setOpen(false);

  const handleClick = useCallback(() => {
    setOpen(prev => !prev);
  }, []);

  return (
    <SearchFormContainer ref={anchorRef}>
      {/* 触发按钮可以放在容器内任意位置，Popover会锚定到整个容器 */}
      <button onClick={handleClick}>打开锚定到容器的Popover</button>
      
      <Popover
        open={open}
        anchorEl={anchorRef.current}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
        transformOrigin={{ vertical: 'top', horizontal: 'center' }}
      >
        <div style={{ padding: '16px' }}>这是锚定到SearchFormContainer的Popover内容</div>
      </Popover>
    </SearchFormContainer>
  );
};

export default SearchComponent;

额外注意事项 #

• 确保触发Popover时，anchorRef.current不为null：比如不要在组件挂载完成前就打开Popover，否则会因为没有DOM元素导致锚定失效。
• 可以通过调整anchorOrigin和transformOrigin属性，精准控制Popover相对于目标元素的显示位置。

内容的提问来源于stack exchange，提问作者Shamoon