<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> 类并将其设置为
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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