Comment masquer l'étiquette Mui TextField ?

Question

<p>Je développe une application Nextjs et j'ai une barre de navigation de tableau de bord construite avec mui qui contient une notification<code><IconButton></code> . </p> <p><strong>dashboard-navbar.js :</strong></p> <pre class="brush:js;toolbar:false;">importer NotificationBox depuis "./notification-box/notification-box"; //... export const DashboardNavbar = (accessoires) => const [down, setDown] = useState(false); const toggleDown = () => setDown(!down); } ; //... retour ( ≪> <NotificationBox down={down} notifications={props.notifications} /> <DashboardNavbarRoot> <div style={{ display : "flex", écart : "25px" }}> <div style={{ transformation : "translate(0,18px)" }}> //... <IcôneBouton aria-label="plus" id="bouton-long" onClick={toggleDown} style={{ transformation : "translate(20px,-15px)" }} > <Badge badgeContent={0} color="primary"variant="dot"> <BellIcon fontSize="petit" /> </Badge> </IconButton> </div> //... </div> </DashboardNavbarRoot> ≪/> ); } ≪/pré> <p><strong>notification-box.js：</strong></p> <pre class="brush:js;toolbar:false;">importer des classes depuis "./notification-box.module.css"; export const NotificationBox = ({ down, notifications }) => { var box = document.getElementById("box"); si (en bas) { box.style.height = "0px"; boîte.style.opacity = 0; } autre { box.style.height = "510px"; boîte.style.opacity = 1; } retour ( <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> ); } ; ≪/pré> <p><strong>notification-box.module.css：</strong></p> <pre class="brush:css;toolbar:false;"> .notifiBox { /* couleur d'arrière-plan : blanc ; */ largeur : 300 px ; hauteur : 0px ; position : absolue ; haut : 63 px ; à droite : 35 px ; transition : opacité de 1 s, hauteur de 250 ms ; box-shadow : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .notifiItem { affichage : flexible ; bordure inférieure : 1px solide #eee ; remplissage : 15px 5px ; marge inférieure : 15 px ; curseur : pointeur ; } .notifiItem : survoler { couleur d'arrière-plan : #eee ; } .notifiBox h2 { taille de police : 14 px ; remplissage : 10 px ; bordure inférieure : 1px solide #eee ; couleur : #999 ; } .notifiBox h2 durée { couleur : #f00 ; } .notifiItem img { bloc de visualisation; largeur : 50 px ; marge droite : 10 px ; rayon de bordure : 50 % ; } .notifiItem .text h4 { couleur : #777 ; taille de police : 16 px ; marge supérieure : 10 px ; } .notifiItem .text p { couleur : #aaa ; taille de police : 12 px ; } ≪/pré> <p><strong>结果：</strong>： </p> <p>我尝试将 <code>background-color</code> 属性添加到 <code>notifiBox</code> 类并将其设置为

1

0

0

P粉239164234

répondre

répondre à tous(1)

je répondrai Fermer

P粉0227236062023-09-06 12:22:37 1 plancher

Les champs de texte Mui sont indexés z. C'est pourquoi cela donne l'impression de couper la frontière d'entrée. 标签

Donc, si vous y ajoutez

, cela masquera l'étiquette. notifiBox 类添加更高的 z-index

Comme +0

Ajouter une réponse 关闭回复

P粉239164234

répondre

Answer 1

Les champs de texte Mui sont indexés z. C'est pourquoi cela donne l'impression de couper la frontière d'entrée. 标签

Donc, si vous y ajoutez

, cela masquera l'étiquette. notifiBox 类添加更高的 z-index