Next.js Dashboard子页面AddGroup组件渲染位置异常求助

我在Next.js项目的dashboard/groups/page.jsx页面中渲染AddGroup组件，已经为dashboard下所有子页面定义了DashboardLayout，但目前组件显示在Sidebar原本所在的左侧区域，不确定是否需要额外配置布局来让组件正确显示。

项目结构 #

app/
├── context/
├── firebase/
├── mobile/
├── portal/
│   ├── components/
│   │   ├── AddGroup.jsx ** 目标组件 **
│   │   └── Sidebar.jsx
│   └── dashboard/
│       ├── groups/
│       │   └── page.jsx ** 渲染组件的页面 **
│       ├── individuals/
│       ├── settings/
│       ├── statistics/
│       ├── layout.jsx
│       └── page.jsx
├── login/
├── utils/
├── dummydata.ts
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx

相关代码 #

Dashboard布局代码（dashboard/layout.jsx） #

import Sidebar from '../components/Sidebar';

const DashboardLayout = ({ children }) => {
    return (
        <div className="min-w-screen min-h-screen bg-gray-200 m-10 flex">
            <div className="w-1/4 p-4">
                <Sidebar/>
            </div>
            <div className='flex-1 flex flex-col'>
                {children}
            </div>
        </div>
    );
};

export default DashboardLayout;

AddGroup组件代码（components/AddGroup.jsx） #

import React from 'react';
import { Dialog, DialogHeader, DialogBody, DialogFooter, Button, Input } from "@material-tailwind/react";

const AddGroup = ({ open, handleOpen }) => {
  return (
    <Dialog open={open} handler={handleOpen}>
      <DialogHeader>Create a Travel Group</DialogHeader>
      <DialogBody>
        <div className="">
          <Input type="text" label="Group Name" />
          <Input type="text" label="Destination" />
          <Input type="date" label="Date" />
          <Input type="number" label="Number of Participants" />
        </div>
      </DialogBody>
      <DialogFooter>
        <Button variant="text" color="red" onClick={handleOpen}>
          Cancel
        </Button>
        <Button variant="gradient" color="green" onClick={() => { /* 表单提交逻辑 */ }}>
          Create
        </Button>
      </DialogFooter>
    </Dialog>
  );
};

export default AddGroup;

Groups页面代码（dashboard/groups/page.jsx） #

'use client'
import React, {useState} from 'react';
import { Button } from "@material-tailwind/react";
import AddGroup from '../../components/AddGroup'

const Groups = () => {

  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(!open);


  return (
    <div className='flex-1 text-gray-800 flex flex-col'>
      <AddGroup open={open} handleOpen={handleOpen} />
      <div className='flex-row flex items-center justify-between'>
        <div className='text-4xl font-medium ml-5 mt-10'>Groups</div>
        <div className='mr-10 mt-10'>
          <Button onClick={handleOpen} autoCapitalize='false' size="lg" color="white" className="flex items-center gap-3 font-normal normal-case">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
            <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
          </svg>
            Add Group
          </Button>
        </div>
      </div>
      <div className='flex-1 flex justify-center items-center text-gray-500'>
        No groups created
      </div>
      <AddGroup open={open} handleOpen={handleOpen}/>
    </div>
  )
}

export default Groups;

解决步骤 #

1. 移除重复渲染的组件 #

你的Groups页面里重复渲染了两次<AddGroup/>，冗余代码可能引发显示异常，直接删掉其中一个（比如页面顶部的那行）。

2. 修复Dialog的全局定位 #

Material Tailwind的Dialog默认会继承父容器的布局规则，导致它被限制在右侧内容区里出现位置偏移。需要强制让Dialog脱离当前布局流，全局居中显示：
修改AddGroup组件中的Dialog标签，添加全局定位类：

<Dialog 
  open={open} 
  handler={handleOpen}
  className="fixed inset-0 flex items-center justify-center z-50"
>

这样Dialog会覆盖整个屏幕居中显示，不再受Sidebar或父容器布局影响。

3. 优化页面层级的flex配置 #

Groups页面最外层的div使用了flex-1，而DashboardLayout的children容器已经是flex-1，嵌套的flex-1可能导致布局挤压。可以把Groups页面的最外层div改成：

<div className='text-gray-800 flex flex-col h-full'>

做完以上三步，组件就能正常显示在页面中央，不会跑到Sidebar区域了。

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