主页 / coding / 问题 / 77497849
Accepted
KostyanWest
Asked: 2023-11-17 04:24:42 +0800 CST

如何更改 MUI 5 中作为 Select 组件一部分的 Popover 组件的位置？

  • 772

我使用一个Select组件（假设是这个）。默认情况下，Popover组件出现在选择字段的正下方，但我想将其放置在右侧。我将在下面描述我尝试实现此行为的方法以及每次都失败的原因。请记住，我是 MUI 的新手。

  1. 改变位置的最正确方法是设置anchorOrigin和transformOrigin道具，但只有当你可以访问这些道具时它才有效。该组件自行Select创建（或更准确地说，是内部的组件）并且不提供 API 来传播 props。PopoverMenuSelect

  2. 该Menu组件有一个传播到 的PopoverClassesprop ，因此我想通过覆盖JS 计算的值和样式来更改位置。但无论我多么努力地试图弄清楚它是如何工作的，我都无法做到。我发现的每个指南都使用了自 MUI v5 以来已弃用的from或from 。MUI v5 中 prop是否已完全弃用？classesPopoverlefttopmakeStyles"@mui/styles"createUseStyles"react-jss"classes

  3. 添加类似 或 之类的样式"& .MuiPopover-root"也Select不起作用Menu，因为PopoverDOM 顶部附近的创建可以用作模式对话框，并且不是Select.

  4. 尽管Menu不会直接将 props 传播到Popover，但它会将 props 传播到MenuList的子级a Popover。使用MenuListProps: {ref=myRef}我可以访问Popoverby的 DOM 元素myRef.current.parentElement。但这还不够，因为我没有好的事件来覆盖值。是在的事件触发Popover后短时间内创建的，因此在事件期间，值是未定义的，之后就太晚了 - 明显是如何跳跃的。onOpenSelectmyRef.currentsetTimeout()Popover

这么简单的动作却太难了。我错过了一些明显的事情吗？

material-ui

1 个回答

  1. Best Answer

    使用Select组件，您可以通过属性传播其Popover道具MenuProps。

    它之所以有效，是因为Menu实际上将 props 传播到Popover并可以接受其所有属性，如文档中所述

    例子：

    <Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={age}
  label="Age"
  onChange={handleChange}
  MenuProps={{
    anchorReference: "anchorPosition",
    anchorPosition: { top: 0, left: 475 }
  }}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>
    • 1

相关问题