저는 Nextjs 앱을 개발 중이며 일반 HTML 및 CSS로 구축된 알림 상자를 여는 알림
을 포함하는 mui로 구축된 대시보드 탐색 표시줄을 가지고 있습니다. .
dashboard-navbar.js:
"./notification-box/notification-box"에서 알림 상자 가져오기;; //... const DashboardNavbar = (props) => const [down, setDown] = useState(false); const 토글다운 = () => setDown(!down); }; //... 반품 ( <>> ); } //... <아이콘버튼 aria-label="더보기" id="긴 버튼" onClick={toggleDown} 스타일={{ 변환: "번역(20px,-15px)" >//...아이콘버튼>
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; } 반품 (); };알림 {notifications.length}
{notifications.map((알림, 색인) => ())}![]()
{알림.제목}
{notification.content}
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;
Mui 텍스트 필드는 Z-인덱싱됩니다. 그렇기 때문에 입력 경계선을 잘라낸 듯한 느낌을 줍니다.
따라서标签
를 추가하면 라벨이 숨겨집니다.
notifiBox
类添加更高的z-index