mui TextField 레이블을 숨기는 방법은 무엇입니까?

Question

저는 Nextjs 앱을 개발 중이며 일반 HTML 및 CSS로 구축된 알림 상자를 여는 알림을 포함하는 mui로 구축된 대시보드 탐색 표시줄을 가지고 있습니다. .

dashboard-navbar.js:

"./notification-box/notification-box"에서 알림 상자 가져오기;;
//...
const DashboardNavbar = (props) =>

 const [down, setDown] = useState(false);
 const 토글다운 = () =>
   setDown(!down);
 };
//...
  반품 (
    <>
      <NotificationBox down={down} 알림={props.notifications} />
      <DashboardNavbarRoot>
          <div style={{ 디스플레이: "flex", 간격: "25px" }}>
            <div style={{ 변환: "번역(0,18px)" }}>
              //...
              <아이콘버튼
                aria-label="더보기"
                id="긴 버튼"
                onClick={toggleDown}
                스타일={{ 변환: "번역(20px,-15px)"
              >
                <Badge BadgeContent={0} color="기본" 변형="점">
                  <BellIcon 글꼴 크기="작은"
                </배지>
              </아이콘버튼>
             
            </div>
          //...
          </div>
      </DashboardNavbarRoot>
    </>
  );
}

notification-box.js：

"./notification-box.module.css"에서 클래스 가져오기;;

const 알림 상자 내보내기 = ({ 아래로, 알림 }) => {
  var box = document.getElementById("box");
  만약 (아래로) {
    box.style.height = "0px";;
    box.style.opacity = 0;
  } 또 다른 {
    box.style.height = "510px";;
    box.style.opacity = 1;
  }
  반품 (
    <div className={classes.notifiBox} id="box">
      <h2>
        알림 <span>{notifications.length}</span>
      </h2>
      {notifications.map((알림, 색인) => (
        <div key={index} className={classes.notifiItem}>
          <img src={notification.img} alt="img" />
          <div className={classes.text}>
            <h4>{알림.제목}</h4>
            <p>{notification.content}</p>
          </div>
        </div>
      ))}
    </div>
  );
};

notification-box.module.css：

  .notifiBox {
    /* 배경색: 흰색; */
    너비: 300px;
    높이: 0px;
    위치: 절대;
    상단: 63px;
    오른쪽: 35px;
    전환: 불투명도 1초, 높이 250ms;
    상자 그림자: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .notifi항목 {
    디스플레이: 플렉스;
    테두리 하단: 1px 단색 #eee;
    패딩: 15px 5px;
    여백 하단: 15px;
    커서: 포인터;
  }
  .notifiItem:hover {
    배경색: #eee;
  }
  .notifiBox h2 {
    글꼴 크기: 14px;
    패딩: 10px;
    테두리 하단: 1px 단색 #eee;
    색상: #999;
  }
  .notifiBox h2 스팬 {
    색상: #f00;
  }
  .notifiItem img {
    디스플레이: 블록;
    너비: 50px;
    오른쪽 여백: 10px;
    테두리 반경: 50%;
  }
  .notifiItem .text h4 {
    색상: #777;
    글꼴 크기: 16px;
    여백 상단: 10px;
  }
  .notifiItem .text p {
    색상: #aaa;
    글꼴 크기: 12px;
  }

结果：：

我尝试将 배경색 属性添加到 notifiBox | gt;

Answer 1

Mui 텍스트 필드는 Z-인덱싱됩니다. 그렇기 때문에 입력 경계선을 잘라낸 듯한 느낌을 줍니다. 标签

따라서

를 추가하면 라벨이 숨겨집니다. notifiBox 类添加更高的 z-index