Prime React Menubar小屏异常：触发按钮不显示且菜单自动展开

问题现象 #

使用PrimeReact的<Menubar>组件时，小屏幕下未显示菜单触发按钮，菜单直接自动展开；同项目中的<MegaMenu>组件小屏表现正常。

当前效果：

预期效果：

技术栈：PrimeReact + Tailwind CSS

相关代码 #

layout/app.tsx #

import { MegaMenu } from "primereact/megamenu";
import MenuStart from "./components/menu-start";
import { useNavigate, useNavigation } from "react-router-dom";
import { useHasAccess } from "../hooks/role";
import { useEffect } from "react";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { Menubar } from "primereact/menubar";
interface iProps {
  children: JSX.Element | JSX.Element[];
}
export default function Layout({ children }: iProps) {
  const navigate = useNavigate();
  const { hasAccess } = useHasAccess(["ROLE_CHEF"]);
  const items = [];
  NProgress.start();
  if (hasAccess)
    items.push(
      {
        label: "Demandes",
        icon: "pi pi-folder",
        command: () => {
          navigate("/demandes");
        },
      },
      {
        label: "Organizations",
        icon: "pi pi-building",
        command: () => {
          navigate("/organizations");
        },
      }
    );
  useEffect(() => {
    NProgress.done();
  });
  return (
    <div className="p-4">
      <Menubar start={MenuStart} model={items}/>
      {children}
    </div>
  );
}

index.css #

@layer tailwind-base, primereact, tailwind-utilities;

/* IMPORTANT: In "styled" mode you must add the PrimeReact Theme here. Do NOT include in "unstyled" mode */
@import "primereact/resources/themes/lara-light-blue/theme.css"
  layer(primereact);

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

解决方案 #

1. 显式设置Menubar的响应式断点 #

PrimeReact的Menubar默认响应式断点可能与预期不符，显式指定breakpoint属性（建议与MegaMenu保持一致，比如960px）：

<Menubar start={MenuStart} model={items} breakpoint="960px" />

2. 修复样式优先级问题 #

尽管已配置Tailwind层顺序，仍可能存在样式覆盖情况。添加自定义CSS确保小屏幕下触发按钮显示、菜单折叠：

@media (max-width: 960px) {
  .p-menubar-button {
    display: flex !important;
  }
  .p-menubar-root-list {
    display: none !important;
  }
}

3. 检查自定义MenuStart组件的布局影响 #

MenuStart组件的内容可能在小屏幕下占据过多空间，导致触发按钮被挤出。给MenuStart添加响应式样式：

// 在MenuStart组件内部
<div className="md:w-auto w-16">
  {/* 你的MenuStart内容 */}
</div>

验证步骤 #

1. 优先尝试添加breakpoint属性，这是组件原生配置，最直接解决问题
2. 若无效，检查并添加自定义CSS修复样式覆盖
3. 最后排查MenuStart组件的布局是否影响Menubar的响应式渲染

内容的提问来源于stack exchange，提问作者EL MAHDI BOUZKOURA