저는 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;