小编hcp*_*oon的帖子

我正在尝试使用在 tailwind 工具箱中找到的这个管理入门模板，并尝试根据自己的喜好对其进行自定义。我已经将模板中的代码拆分为 3 个单独的文件，如下所示，当我children用一些东西替换主文件中的变量时，甚至像test我在页面底部得到一个带有大量额外空白的滚动条，如图所示这里

'Main' 文件导入导航栏和侧边栏，然后还有一个主页面内容的占位符

import Navbar from "@/Components/Layouts/Navbar"
import Sidebar from "@/Components/Layouts/Sidebar"

export default function Main({ name, children }) {

  return (
    <div className="bg-gray-800 flex flex-col h-screen">

      <Navbar />

      <div className="flex flex-col md:flex-row flex-grow">

        <Sidebar />

        <div className="flex-1 bg-gray-100">
          <div className="bg-gray-800 pt-3">
            <div className="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
              <h3 className="font-bold pl-2">{name}</h3>
            </div>
          </div>
          <div className="p-4">
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}

导航栏

import { useState } from …