CSSPositionMaterialUI選單項在其父項下方-有解無憂

我有一個 Material UI 對話框，它只包含一些文本和一個帶有選單選項下拉選單的圖示。演示可以在這里看到：https ://codesandbox.io/s/prod-rain-1rwhf?file=/src/App.js

我正在嘗試定位Menu組件，使其在單擊時顯示在組件下方Settings。我已經position: relative在父元素（即Settings圖示）上指定了 a 以及對子元素（即組件）指定了position: absolutewith ，但這似乎不起作用。top: -10pxMenu

如何設定它，以便在單擊“設定”圖示時，選單直接顯示在“設定”下方，以及在調整視窗大小以使選單跟隨時出現？

編輯：

如果打開代碼框有任何問題，這就是我所擁有的。

應用程式.js：

import "./styles.css";

import { useState } from "react";

import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  ListItemText,
  Menu,
  MenuItem
} from "@material-ui/core";
import Settings from "@material-ui/icons/Settings";

export default function App() {
  const [openMenu, setOpenMenu] = useState(false);
  return (
    <div className="App">
      <h1 className="blueFont">Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Dialog fullWidth maxWidth="sm" open={true} hideBackdrop={true}>
        <DialogTitle style={{ height: "60px" }}>My title</DialogTitle>
        <DialogContent>My Content</DialogContent>

        <Divider style={{ width: "100%" }} />
        <DialogActions>
          <div className="settings">
            <Settings onClick={() => setOpenMenu(!openMenu)} />
            <div className="menu">
              <Menu open={openMenu}>
                <MenuItem>
                  <ListItemText>First option</ListItemText>
                </MenuItem>
                <MenuItem>
                  <ListItemText>Second option</ListItemText>
                </MenuItem>
              </Menu>
            </div>
          </div>
        </DialogActions>
      </Dialog>
    </div>
  );
}

樣式.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.blueFont {
  color: blue;
}

.settings {
  position: relative;
}

.menu {
  position: absolute;
  top: -10px;
}

uj5u.com熱心網友回復：

您也可以參考檔案

https://mui.com/components/menus

我還創建了一個沙箱

https://codesandbox.io/s/elastic-hooks-0fi6z?file=/src/App.js

 const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);

<DialogActions>
          <div>
            <Button id="basic-button" onClick={handleClick}>
              Dashboard <Settings />
            </Button>
            <Menu
              id="basic-menu"
              anchorEl={anchorEl}
              open={open}
              onClose={handleClose}
              anchorOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
              transformOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
            >
              <MenuItem onClick={handleClose}>Profile</MenuItem>
              <MenuItem onClick={handleClose}>My account</MenuItem>
              <MenuItem onClick={handleClose}>Logout</MenuItem>
            </Menu>
          </div>
        </DialogActions>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418308.html

標籤：

上一篇：如何讓網站頁腳停留在頁面底部？

下一篇：每次點擊向右移動方塊