<p>Ich entwickle eine Nextjs-Anwendung und habe eine mit mui erstellte Dashboard-Navigationsleiste, die eine Benachrichtigung enthält<code><IconButton></code>, die das Benachrichtigungsfeld öffnet, das mit normalem HTML und CSS erstellt wurde . </p> <p><strong>dashboard-navbar.js:</strong></p> <pre class="brush:js;toolbar:false;">NotificationBox importieren aus "./notification-box/notification-box"; //...... export const DashboardNavbar = (props) => const [down, setDown] = useState(false); const toggleDown = () => setDown(!down); }; //...... zurückkehren ( <> <NotificationBox down={down} notifications={props.notifications} /> <DashboardNavbarRoot> <div style={{ display: "flex", gap: "25px" }}> <div style={{ transform: "translate(0,18px) }}> //...... <IconButton aria-label="mehr" id="langer Knopf" onClick={toggleDown} style={{ transform: "translate(20px,-15px) }} > <Badge BadgeContent={0} color="primary" variant="dot"> <BellIcon fontSize="small" </Badge> </IconButton> </div> //...... </div> </DashboardNavbarRoot> </> ); } </pre> <p><strong>notification-box.js:</strong></p> <pre class="brush:js;toolbar:false;">Klassen importieren aus "./notification-box.module.css"; export const NotificationBox = ({ down, notifications }) => { var box = document.getElementById("box"); if (unten) { box.style.height = "0px"; box.style.opacity = 0; } anders { box.style.height = "510px"; box.style.opacity = 1; } zurückkehren ( <div className={classes.notifiBox} id="box"> <h2> Benachrichtigungen <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> ); }; </pre> <p><strong>notification-box.module.css：</strong></p> <pre class="brush:css;toolbar:false;"> .notifiBox { /* Hintergrundfarbe: weiß; */ Breite: 300px; Höhe: 0px; Position: absolut; oben: 63px; rechts: 35px; Übergang: 1 s Deckkraft, 250 ms Höhe; Box-Shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .notifiItem { Anzeige: Flex; border-bottom: 1px solid #eee; Polsterung: 15px 5px; Rand unten: 15px; Cursor: Zeiger; } .notifiItem:hover { Hintergrundfarbe: #eee; } .notifiBox h2 { Schriftgröße: 14px; Polsterung: 10px; border-bottom: 1px solid #eee; Farbe: #999; } .notifiBox h2 span { Farbe: #f00; } .notifiItem img { Bildschirmsperre; Breite: 50px; Rand rechts: 10px; Randradius: 50 %; } .notifiItem .text h4 { Farbe: #777; Schriftgröße: 16px; Rand oben: 10px; } .notifiItem .text p { Farbe: #aaa; Schriftgröße: 12px; } </pre> <p><strong>结果：</strong>： </p> <p>我尝试将 <code>Hintergrundfarbe</code> 属性添加到 <code>notifiBox</code> 类并将其设置为 <code>white</code> ::</p>