Material UI DatePicker按钮触发时弹窗显示在左上角如何解决

• DatePicker的弹窗基于Popper组件实现，定位时需要锚定到触发元素的DOM节点，这个锚点绑定逻辑依赖renderInput回调返回组件上透传的ref属性。
• 你自定义渲染Button时，没有把params里的锚点ref等必要属性绑定到Button上，Popper找不到锚定元素就会默认渲染到页面左上角。
• 注释里的TextField实现正常，是因为{...params}把所有入参（包括定位所需的ref、触发器关联属性）全透传给了TextField，锚点绑定自动完成。

核心是把params里的锚点ref绑定到自定义Button上，同时透传必要的无障碍属性即可，注意不要把TextField专属的属性全量透传到Button上，避免出现无效DOM属性警告，修改后的完整代码如下：

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DatePicker
    clearable={true}
    open={isOpen}
    onClose={() => setIsOpen(false)}
    label='Basic example'
    value={currentDate}
    onChange={newValue => {
      setCurrentDate(newValue)
    }}
    popperPlacement="bottom-end"
    renderInput={params => (
      <Button
        variant='contained'
        ref={params.inputRef} // 核心：绑定锚点ref，供Popper计算定位
        {...params.inputProps} // 透传无障碍关联属性
        onClick={() => setIsOpen(isOpen => !isOpen)}
      >
        {dateString}
      </Button>
    )}
  />
</LocalizationProvider>

修改后弹窗会以Button为锚点，按照你配置的bottom-end规则正常定位，不会再跑到左上角。

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