Next.js中DaisyUI导航栏下拉菜单无法展开求助

我在Next.js项目中使用DaisyUI导航栏，未对JavaScript做过多修改，但下拉菜单无法像DaisyUI官网那样正常展开。点击“Parent”选项时，details标签会添加open属性，仅箭头发生旋转，子菜单却不显示。将官网相同代码放入.tsx文件后仍无法正常运行，相关代码及配置如下：

导航组件代码 #

<div className="navbar bg-base-100">
  <div className="navbar-start">
    <div className="dropdown">
      <label tabIndex={0} className="btn btn-ghost lg:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
      </label>
      <ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
        <li><a>Item 1</a></li>
        <li>
          <a>Parent</a>
          <ul className="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </li>
        <li><a>Item 3</a></li>
      </ul>
    </div>
    <a className="btn btn-ghost normal-case text-xl">daisyUI</a>
  </div>
  <div className="navbar-center hidden lg:flex">
    <ul className="menu menu-horizontal px-1">
      <li><a>Item 1</a></li>
      <li tabIndex={0}>
        <details>
          <summary>Parent</summary>
          <ul className="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </details>
      </li>
      <li><a>Item 3</a></li>
    </ul>
  </div>
  <div className="navbar-end">
    <a className="btn">Button</a>
  </div>
</div>

tailwind.config.js配置 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};

package.json依赖 #

{
  "name": "lion_lazuli_travel",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.5.8",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "axios": "^1.5.0",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "formik": "^2.4.3",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.2.2",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "daisyui": "^3.6.4",
    "postcss": "^8.4.29",
    "tailwindcss": "^3.3.3"
  }
}

解决思路 #

• 版本兼容性排查：当前使用的DaisyUI 3.6.4与Next.js 13.4.19可能存在适配问题，尝试将DaisyUI升级至最新稳定版，或降级到经测试兼容的版本。
• 确认Tailwind内容扫描范围：检查导航组件是否位于src目录下，确保tailwind.config.js的content配置覆盖了该组件文件，避免DaisyUI的子菜单样式未被生成。
• 强制显式样式覆盖：在全局CSS文件（如globals.css）中添加以下样式，强制子菜单在details打开时显示：

  details[open] ul {
    display: block !important;
  }
  

• 排查自定义样式冲突：检查项目全局CSS或其他组件样式，是否存在ul { display: none; }或类似规则，意外覆盖了DaisyUI的默认子菜单样式。
• 验证渲染模式影响：如果使用Next.js 13+ App Router，给导航组件添加'use client'指令，确保组件在客户端侧渲染，避免SSR导致样式未正确激活。另外可在纯HTML文件中测试导航代码，确认是否为Next.js渲染逻辑引发的问题。

内容的提问来源于stack exchange，提问作者Khekaes