<p>I'm developing a Nextjs application and I have a dashboard navigation bar built with mui which contains a notification<code><IconButton></code> which opens the notification box which is Built with regular HTML and CSS. </p> <p><strong>dashboard-navbar.js:</strong></p> <pre class="brush:js;toolbar:false;">import NotificationBox from "./notification-box/notification-box"; //... export const DashboardNavbar = (props) => { const [down, setDown] = useState(false); const toggleDown = () => { setDown(!down); }; //... return ( <> <NotificationBox down={down} notifications={props.notifications} /> <DashboardNavbarRoot> <div style={{ display: "flex", gap: "25px" }}> <div style={{ transform: "translate(0,18px)" }}> //... <IconButton aria-label="more" id="long-button" 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;">import classes from "./notification-box.module.css"; export const NotificationBox = ({ down, notifications }) => { var box = document.getElementById("box"); if (down) { box.style.height = "0px"; box.style.opacity = 0; } else { box.style.height = "510px"; box.style.opacity = 1; } return ( <div className={classes.notifiBox} id="box"> <h2> Notifications <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 { /* background-color: white; */ width: 300px; height: 0px; position: absolute; top: 63px; right: 35px; transition: 1s opacity, 250ms height; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .notifiItem { display: flex; border-bottom: 1px solid #eee; padding: 15px 5px; margin-bottom: 15px; cursor: pointer; } .notifiItem:hover { background-color: #eee; } .notifiBox h2 { font-size: 14px; padding: 10px; border-bottom: 1px solid #eee; color: #999; } .notifiBox h2 span { color: #f00; } .notifiItem img { display: block; width: 50px; margin-right: 10px; border-radius: 50%; } .notifiItem .text h4 { color: #777; font-size: 16px; margin-top: 10px; } .notifiItem .text p { color: #aaa; font-size: 12px; } </pre> <p><strong>结果：</strong>： </p> <p>我尝试将 <code>background-color</code> 属性添加到 <code>notifiBox</code> 类并将其设置为 <code>white</code>，得到了更好的结果，但仍然无法隐藏mui textField标签，无论如何都会显示：</p>