如何隐藏mui TextField标签？

Question

<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> </> ）； } </前> <p><strong>notification-box.js：</strong></p>

从“./notification-box.module.css”导入类；

导出常量NotificationBox =（{向下，通知}）=> {
  var box = document.getElementById(“box”);
  如果（向下）{
    box.style.height = “0px”;
    box.style.opacity = 0;
  } 别的 {
    box.style.height = "510px";
    box.style.opacity = 1;
  }
  返回 （
    

      

        通知{notifications.length}
      </h2>
      {notifications.map((通知，索引) => (
        
;
          <img src={notification.img} alt=“img” >>
          
;
            
{通知.标题}
            <p>{通知.内容}</p>
          
        
      ))}
    
  ）；
};
</前>
<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>

Answer 1

Mui 文本字段的标签是z索引的。这就是它给人的印象是切断了输入边框线。

因此，如果您向 notifiBox 类添加更高的 z-index，它将隐藏标签。