Wie verstecke ich mein TextField-Label?

Question

Ich entwickle eine Nextjs-Anwendung und habe eine mit mui erstellte Dashboard-Navigationsleiste, die eine Benachrichtigung enthält, die das Benachrichtigungsfeld öffnet, das mit normalem HTML und CSS erstellt wurde .

dashboard-navbar.js:

NotificationBox importieren aus "./notification-box/notification-box";
//......
export const DashboardNavbar = (props) =>

 const [down, setDown] = useState(false);
 const toggleDown = () =>
   setDown(!down);
 };
//......
  zurückkehren (
    <>
      <NotificationBox down={down} notifications={props.notifications} />
      <DashboardNavbarRoot>
          <div style={{ display: "flex", gap: "25px" }}>
            <div style={{ transform: "translate(0,18px) }}>
              //......
              <IconButton
                aria-label="mehr"
                id="langer Knopf"
                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:

Klassen importieren aus "./notification-box.module.css";

export const NotificationBox = ({ down, notifications }) => {
  var box = document.getElementById("box");
  if (unten) {
    box.style.height = "0px";
    box.style.opacity = 0;
  } anders {
    box.style.height = "510px";
    box.style.opacity = 1;
  }
  zurückkehren (
    <div className={classes.notifiBox} id="box">
      <h2>
        Benachrichtigungen <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 {
    /* Hintergrundfarbe: weiß; */
    Breite: 300px;
    Höhe: 0px;
    Position: absolut;
    oben: 63px;
    rechts: 35px;
    Übergang: 1 s Deckkraft, 250 ms Höhe;
    Box-Shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .notifiItem {
    Anzeige: Flex;
    border-bottom: 1px solid #eee;
    Polsterung: 15px 5px;
    Rand unten: 15px;
    Cursor: Zeiger;
  }
  .notifiItem:hover {
    Hintergrundfarbe: #eee;
  }
  .notifiBox h2 {
    Schriftgröße: 14px;
    Polsterung: 10px;
    border-bottom: 1px solid #eee;
    Farbe: #999;
  }
  .notifiBox h2 span {
    Farbe: #f00;
  }
  .notifiItem img {
    Bildschirmsperre;
    Breite: 50px;
    Rand rechts: 10px;
    Randradius: 50 %;
  }
  .notifiItem .text h4 {
    Farbe: #777;
    Schriftgröße: 16px;
    Rand oben: 10px;
  }
  .notifiItem .text p {
    Farbe: #aaa;
    Schriftgröße: 12px;
  }

结果：：

我尝试将 Hintergrundfarbe 属性添加到 notifiBox 类并将其设置为 white ::

Answer 1

Mui 文本字段的标签是z索引的。这就是它给人的印象是切断了输入边框线。

因此，如果您向 notifiBox 类添加更高的 z-index，它将隐藏标签。