<p>Nextjs アプリケーションを開発していて、mui で構築されたダッシュボード ナビゲーション バーに通知<code><IconButton></code> が含まれており、通常の HTML と CSS で構築された通知ボックスを開きます。 。 </p> <p><strong>dashboard-navbar.js:</strong></p> <pre class="brush:js;toolbar:false;">NotificationBox を "./notification-box/notification-box" からインポートします; //... import const DashboardNavbar = (props) => { const [down, setDown] = useState(false); const toggleDown = () => { setDown(!down); }; //... 戻る （ <> <NotificationBox down={down} notification={props.notifications} /> <ダッシュボードナビゲーションバールート> <div style={{ 表示: "flex"、ギャップ: "25px" }}> <div style={{ 変換: "translate(0,18px)" }}> //... <アイコンボタン aria-label="詳細" id="長ボタン" onClick={トグルダウン} style={{ 変換: "translate(20px,-15px)" }} > <バッジバッジコンテンツ = {0} カラー = "プライマリ" バリアント = "ドット" > <BellIcon fontSize="small" /> </バッジ> </アイコンボタン> </div> //... </div> </DashboardNavbarRoot> </> ); } </pre> <p><strong>notification-box.js:</strong></p> <pre class="brush:js;toolbar:false;">「./notification-box.module.css」からクラスをインポートします; エクスポート const 通知ボックス = ({ ダウン, 通知 }) => { var box = document.getElementById("box"); if (ダウン) { box.style.height = "0px"; ボックス.スタイル.不透明度 = 0; } それ以外 { box.style.height = "510px"; ボックス.スタイル.不透明度 = 1; } 戻る （ <div className={classes.notifiBox} id="box">

通知 <span>{notifications.length}</span> </h2> {notifications.map((通知, インデックス) => ( <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 { /* 背景色: 白; */ 幅: 300ピクセル; 高さ: 0px; 位置: 絶対; 上: 63ピクセル; 右: 35ピクセル; トランジション: 1 秒の不透明度、250 ミリ秒の高さ。 ボックスシャドウ: 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 { 表示ブロック; 幅: 50ピクセル; 右マージン: 10px; 境界半径: 50%; } .notifiItem .text h4 { カラー:#777; フォントサイズ: 16px; マージントップ: 10px; } .notifiItem .text p { 色: #aaa; フォントサイズ: 12px; } </pre> <p><strong>結果：</strong>： </p> <p>我尝试将 <code>背景色</code> <code>notifiBox</code> にプロパティ プロパティが追加されました。設定を <code>white</code> にすると、より良い結果が得られますが、無法隐藏水 textField フィールド、無許可の都市表示:</p>