<p>我正在开发一个 Nextjs 应用程序，我有一个用 mui 构建的仪表板导航栏，它包含一个通知 <code><IconButton></code> ，它打开通知框，后者是用常规 HTML 构建的和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>
1
811
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
Mui 文本字段的
标签是z索引的。这就是它给人的印象是切断了输入边框线。因此，如果您向
notifiBox类添加更高的z-index，它将隐藏标签。