如何隱藏mui TextField標籤？
P粉239164234
2023-09-05 15:41:00
<p>我正在開發一個Nextjs 應用程序，我有一個用mui 構建的儀表板導航欄，它包含一個通知<code><IconButton></code> ，它打開通知框，後者是用常規HTML 建構的和CSS。 </p>
<p><strong>dashboard-navbar.js：</strong></p>
<pre class="brush:js;toolbar:false;">import NotificationBox 從 "./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>
）；
};
</前>
<p><strong>notification-box.module.css：</strong></p>
<pre class="brush:css;toolbar:false;"> .notifiBox {
/* 背景顏色：白色； */
寬度：300px；
高度：0 像素；
位置：絕對；
頂部：63 像素；
右：35 像素；
過渡：1s 不透明度，250ms 高度；
框陰影: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.notifiItem {
顯示：柔性；
邊框底部：1px 實線#eee；
內邊距：15px 5px；
下邊距：15px；
遊標：指針；
}
.notifiItem:懸停{
背景顏色：#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；
}
</前>
<p><strong>結果：</strong>：
</p>
<p>我嘗試將<code>背景顏色</code>屬性加入到 notifiBox類別將其設為<code>white</code>，得到了更好的結果，但仍然無法隱藏mui textField標籤，無論如何都會顯示：</p>
Mui 文字欄位的
標籤是z索引的。這就是它給人的印像是切斷了輸入邊框線。因此，如果您向
notifiBox類別添加更高的z-index，它將隱藏標籤。