如何在MUI Dialog组件内正常显示@reach/combobox弹出层？

MUI Dialog 组件默认会生成独立堆叠上下文，且内容容器默认带overflow: auto属性，会裁剪超出容器范围的子元素。@reach/combobox的弹出层默认挂载在当前组件所在DOM位置，z-index优先级低于Dialog的内置层级规则，再加上父容器的溢出裁剪，就会出现弹出层不显示的问题。组件放在Dialog外部时，没有父级裁剪和层级压制，所以可以正常展示。

方案1：自定义Combobox弹出层挂载节点（优先推荐，无布局副作用） #

@reach/combobox的ComboboxPopover组件支持指定弹出层的挂载容器，直接把弹出层挂到Dialog的根节点或者全局body下，同步调高z-index避开Dialog的层级限制即可，修改Search组件的对应代码：

// 若使用MUI v5可引入上下文拿Dialog容器节点，不引入也可以直接挂body
// import { useDialogContext } from '@mui/material/Dialog';

function Search({ panTo, setMarker }) {
  // 原有业务逻辑保持不变
  // const { paperRef } = useDialogContext() ?? {};

  return (
    <div className="search">
      <Combobox onSelect={handleSelect}>
        <ComboboxInput value={value} onChange={handleInput} disabled={!ready} placeholder="Search your location" />
        <ComboboxPopover 
          // 用MUI上下文就传paperRef.current，否则直接传document.body
          container={document.body}
          style={{ zIndex: 1500 }}
        >
          <ComboboxList>
            {status === 'OK' && data.map(({ id, description }) => <ComboboxOption key={uuid()} value={description} />)}
          </ComboboxList>
        </ComboboxPopover>
      </Combobox>
    </div>
  );
}

方案2：关闭Dialog内容区的溢出裁剪 #

直接修改DialogContent的overflow属性，取消溢出裁剪，同时给combobox弹出层设置足够高的z-index：

<DialogContent 
  dividers
  sx={{ overflow: 'visible' }}
>
   <MapsLocation />
</DialogContent>

同步给combobox弹出层加全局样式修正层级：

.search [data-reach-combobox-popover] {
  z-index: 1500 !important;
}

注意：该方案如果Dialog内容高度超过视口，可能出现内容溢出Dialog边框的布局问题，仅适合弹窗内容固定高度的场景使用。

额外必改问题 #

你贴的代码里GoogleMap子组件的Search标签未闭合，属于语法错误，也可能导致组件渲染异常，记得一并修正：

// 原错误写法
<Search panTo={panTo} setMarker={setMarkers} 
<Locate panTo={panTo} />

// 修正后写法
<Search panTo={panTo} setMarker={setMarkers} />
<Locate panTo={panTo} />

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