mui TextField 레이블을 숨기는 방법은 무엇입니까?
<p>저는 Nextjs 앱을 개발 중이며 일반 HTML 및 CSS로 구축된 알림 상자를 여는 알림<code><IconButton></code>을 포함하는 mui로 구축된 대시보드 탐색 표시줄을 가지고 있습니다. . </p>
<p><strong>dashboard-navbar.js:</strong></p>
<pre class="brush:js;toolbar:false;">"./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>
</>
);
}
</pre>
<p><strong>notification-box.js：</strong></p>
<pre class="brush:js;toolbar:false;">"./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>
);
};
</pre>
<p><strong>notification-box.module.css：</strong></p>
<pre class="brush:css;toolbar:false;"> .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;
}
</pre>
<p><strong>结果：</strong>：
</p>
<p>我尝试将 <code>배경색</code> 属性添加到 <code>notifiBox</code> | gt;
