我正在開發(fā)一個(gè)Nextjs應(yīng)用程序，我有一個(gè)用mui構(gòu)建的儀表板導(dǎo)航條，它包括一個(gè)通知& ltIconButton & gt后者是用常規(guī)的HTML和css構(gòu)建的。

儀表板-navbar.js:

import NotificationBox from "./notification-box/notification-box";
//...
export const DashboardNavbar = (props) => {

 const [down, setDown] = useState(false);
 const toggleDown = () => {
   setDown(!down);
 };
//...
  return (
    <>
      <NotificationBox down={down} notifications={props.notifications} />
      <DashboardNavbarRoot>
          <div style={{ display: "flex", gap: "25px" }}>
            <div style={{ transform: "translate(0,18px)" }}>
              //...
              <IconButton
                aria-label="more"
                id="long-button"
                onClick={toggleDown}
                style={{ transform: "translate(20px,-15px)" }}
              >
                <Badge badgeContent={0} color="primary" variant="dot">
                  <BellIcon fontSize="small" />
                </Badge>
              </IconButton>
             
            </div>
          //...
          </div>
      </DashboardNavbarRoot>
    </>
  );
}

notification-box.js

import classes from "./notification-box.module.css";

export const NotificationBox = ({ down, notifications }) => {
  var box = document.getElementById("box");
  if (down) {
    box.style.height = "0px";
    box.style.opacity = 0;
  } else {
    box.style.height = "510px";
    box.style.opacity = 1;
  }
  return (
    <div className={classes.notifiBox} id="box">
      <h2>
        Notifications <span>{notifications.length}</span>
      </h2>
      {notifications.map((notification, index) => (
        <div key={index} className={classes.notifiItem}>
          <img src={notification.img} alt="img" />
          <div className={classes.text}>
            <h4>{notification.title}</h4>
            <p>{notification.content}</p>
          </div>
        </div>
      ))}
    </div>
  );
};

notification-box.module.css

.notifiBox {
    /* background-color: white; */
    width: 300px;
    height: 0px;
    position: absolute;
    top: 63px;
    right: 35px;
    transition: 1s opacity, 250ms height;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .notifiItem {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 15px 5px;
    margin-bottom: 15px;
    cursor: pointer;
  }
  .notifiItem:hover {
    background-color: #eee;
  }
  .notifiBox h2 {
    font-size: 14px;
    padding: 10px;
    border-bottom: 1px solid #eee;
    color: #999;
  }
  .notifiBox h2 span {
    color: #f00;
  }
  .notifiItem img {
    display: block;
    width: 50px;
    margin-right: 10px;
    border-radius: 50%;
  }
  .notifiItem .text h4 {
    color: #777;
    font-size: 16px;
    margin-top: 10px;
  }
  .notifiItem .text p {
    color: #aaa;
    font-size: 12px;
  }

結(jié)果:

我嘗試在notifiBox類中添加背景色屬性，并將其設(shè)置為白色，得到了更好的結(jié)果，但仍然無法隱藏mui文本字段標(biāo)簽，它仍然顯示:

# # # Mui文本字段的標(biāo)簽是z索引的。這給了它切斷輸入邊界的印象。

因此，如果您向notifiBox類添加一個(gè)更高的z-index，它將隱藏標(biāo)簽。