我希望你们都做得很好!这是我的代码Sandbox :https://codesandbox.io/s/hungry-agnesi-vn6039?file=/demo.tsx

我目前希望有material 的用户界面菜单下拉下拉在按钮的左下角开始.然而,正如在我的代码沙箱中看到的那样,菜单从我想要的位置的右侧开始.有没有办法启动按钮左下角的下拉菜单?我真的很感谢大家的回复!

谢谢!

推荐答案

您可以在下拉列表中添加负边框Left,如下所示.这是正在工作的codesandbox美元

      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
        MenuListProps={{
          "aria-labelledby": "basic-button"
        }}
        style={{ // Add here you negative margin
          marginLeft: "-8px"
        }}
      >

让我知道它是否有帮助,如果是可以为您添加内联样式.或者,您也可以使用样式化组件来执行相同的操作.

[UPDATE] 如果您想要在一般情况下应用它,您可以使用主题(我不推荐这样做,除非您对它有把握)并覆盖MuiPopover组件,如下所示.

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  components: {
    MuiPopover: {
      styleOverrides: {
        paper: {
          marginLeft: '-8px'
        }
      }
    }
  },
});

Reactjs相关问答推荐

两条react 路由的行为不同.有没有人能解释一下,我已经找了好几天了

StyleX中的多语言支持

生成Reaction Vite应用程序的停靠容器时无法识别环境变量

React路由dom布局隐藏内容

当我无法引用模态组件时,如何使模态组件在 Next.js/React 中管理自己的状态?

React Todo List 应用程序我在实现删除功能时遇到问题

Chakra UI:如何在选中状态下设置复选框 colored颜色

useEffect 内的 onClick 和 addEventListener 之间的 click 事件顺序差异

如何在 ChartJS 中创建此图表?在 NEXTjs 和 TSX 中

REACT: UseState 没有更新变量(ant design 模态形式)

将外部 JavaScript 导入 React(通过文件)

即使配置了 webpack.config.js,html-loader 也不起作用

带有 webpack 错误多个文件匹配路由名称的 Expo-router.无法Bundle 或部署应用程序

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据?

如何通过 id 从 useSprings 数组中删除元素

如何解决在 react.js 中找不到模块错误

加密 Django Rest Framework API 响应 + 解密响应应用程序中的响应

使用 useRef(uuid()) 的目的是什么?

哪个 PrivateRouter 实现更好:高阶组件还是替换?

如何在组件文件夹内的react 组件文件中导入外部css文件?