<p>Saya sedang membangunkan apl Nextjs dan saya mempunyai bar navigasi papan pemuka yang dibina dengan mui yang mengandungi pemberitahuan<kod><IconButton</code> yang membuka kotak pemberitahuan yang Dibina dengan HTML dan CSS biasa . </p> <p><strong>papan pemuka-navbar.js:</strong></p> <pre class="brush:js;toolbar:false;">import NotificationBox daripada "./notification-box/notification-box"; //... eksport const DashboardNavbar = (props) => const [down, setDown] = useState(false); const toggleDown = () => setDown(!down); }; //... kembali ( <> <Kotak Pemberitahuan turun={turun} pemberitahuan={props.notifications} /> <Papan PemukaNavbarRoot> <gaya div={{ paparan: "flex", jurang: "25px" <gaya div={{ transform: "terjemah(0,18px)" //... <IconButton aria-label="lagi" id="butang panjang" onClick={toggleDown} style={{ transform: "terjemah(20px,-15px)" > <Badge badgeContent={0} color="primary"varian="dot"> <BellIcon fontSize="kecil" </Lencana> </IconButton> </div> //... </div> </DashboardNavbarRoot> </> ); } </pra> <p><strong>notification-box.js：</strong></p> <pre class="brush:js;toolbar:false;">import kelas daripada "./notification-box.module.css"; export const NotificationBox = ({ bawah, pemberitahuan }) => { kotak var = document.getElementById("kotak"); jika (bawah) { box.style.height = "0px"; box.style.opacity = 0; } lain { box.style.height = "510px"; box.style.opacity = 1; } kembali ( <div className={classes.notifiBox} id="box"> <h2> Pemberitahuan <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> ); }; </pra> <p><strong>notification-box.module.css：</strong></p> <pre class="brush:css;toolbar:false;"> .notifiBox { /* warna latar: putih; */ lebar: 300px; ketinggian: 0px; jawatan: mutlak; atas: 63px; kanan: 35px; peralihan: kelegapan 1s, ketinggian 250ms; bayang-kotak: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .notifyItem { paparan: flex; sempadan-bawah: 1px pepejal #eee; padding: 15px 5px; jidar bawah: 15px; kursor: penunjuk; } .notifiItem:hover { warna latar belakang: #eee; } .notifyBox h2 { saiz fon: 14px; padding: 10px; sempadan-bawah: 1px pepejal #eee; warna: #999; } .notifiBox h2 span { warna: #f00; } .notifyItem img { paparan: blok; lebar: 50px; jidar kanan: 10px; jejari sempadan: 50%; } .notifyItem .text h4 { warna: #777; saiz fon: 16px; jidar atas: 10px; } .notifyItem .text p { warna: #aaa; saiz fon: 12px; } </pra> <p><strong>结果：</strong>： </p> <p>我尝试将 <kod>warna latar belakang</kod> 属性添加到 <kod>notifiBox</code> 类并将其设置为 <code>white</code>，得到了更好的结果，但仍然无法隐藏mui textField，澗你亮：</p>