How to hide mui TextField label?

Question

I'm developing a Nextjs application and I have a dashboard navigation bar built with mui which contains a notification which opens the notification box which is Built with regular HTML and CSS.

dashboard-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;
  }

结果：：

我尝试将 background-color 属性添加到 notifiBox 类并将其设置为 white，得到了更好的结果，但仍然无法隐藏mui textField标签，无论如何都会显示：

Answer 1

Mui text fields' tags are z-indexed. That's why it gives the impression of cutting off the input border line.

So if you add a higher z-index to the notifiBox class it will hide the label.