NextUI 从 v2.0.0 起正式移除了 Container 布局组件，因此在 @nextui-org/react@^2.2.9 中直接导入会报错；若需该功能，可降级至 v1.x，或使用 v2 提供的现代布局方案（如 div + className 结合 Tailwind 或 Grid, Spacer, Card 等组合实现等效效果。
nextui 从 v2.0.0 起正式移除了 `container` 布局组件，因此在 `@nextui-org/react@^2.2.9` 中直接导入会报错；若需该功能，可降级至 v1.x，或使用 v2 提供的现代布局方案（如 `div` + `classname` 结合 tailwind 或 `grid`, `spacer`, `card` 等组合实现等效效果。
NextUI 的重大版本升级（v1 → v2）不仅带来了性能优化与 API 重构，也同步精简了部分布局工具组件——其中 Container 正是被明确移除的成员之一。官方文档已不再为 v2 版本维护 Container 的 API 页面，其设计哲学转向更灵活、更符合现代 CSS 布局（如 Flexbox/Grid）的组合式实践。
✅ 正确做法：使用 v2 推荐的替代方案
在 NextUI v2 中，推荐通过语义化 HTML 元素配合内置间距工具与响应式工具类实现容器式布局。例如：
// ✅ 推荐：使用 div + Tailwind 类（NextUI 默认集成 Tailwind）
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<h1 className="text-2xl font-bold">My Page</h1>
<div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
{/* 使用 NextUI 组件填充 */}
<Button color="primary">Action</Button>
<Input placeholder="Search..." />
</div>
</div>NextUI v2 提供了多个辅助布局组件，可增强结构清晰度：
-
<spacer y="{2}"></spacer>：插入垂直/水平空白间距； -
<grid.container gap="{2}" justify="center"></grid.container>：基于 Grid 的响应式容器（需从@nextui-org/react导入）； -
<card css="{{" mw:></card>：作为内容区块容器，支持内边距与阴影控制。
⚠️ 注意：
Grid.Container并非Container的直接替代品，它本质是语义化<div> 封装，不提供最大宽度约束（<code>max-width）或居中逻辑，仍需手动添加css={{ maxWidth: "$lg", margin: "0 auto" }}或 Tailwind 类。❌ 不建议的做法：强行降级至 v1
虽然
Container在 NextUI v1 文档 中可用，但降级存在显著风险：
- NextUI v1 不兼容 React 18 的并发特性（如 Suspense、Transitions）；
- 与 Next.js 14 的 App Router、Server Components 存在兼容性问题；
- 官方已停止对 v1 的维护与安全更新。
若项目必须依赖
Container的特定行为（如内置断点宽度、自动居中、响应式 padding），建议封装一个轻量CustomContainer组件复用：// components/CustomContainer.tsx import { CSS, styled } from '@nextui-org/react'; const StyledContainer = styled('div', { width: '100%', maxWidth: '76.5rem', // 对应 xl 屏幕 margin: '0 auto', px: '$6', '@sm': { px: '$8' }, '@md': { px: '$10' }, }); interface CustomContainerProps { css?: CSS; children: React.ReactNode; } export const CustomContainer = ({ css, children }: CustomContainerProps) => ( <StyledContainer css={css}>{children}</StyledContainer> );然后在页面中使用：
<CustomContainer> <h2>Welcome to NextUI v2</h2> <Button>Get Started</Button> </CustomContainer>✅ 总结
Container是 NextUI v1 的遗留组件，在 v2+ 中已彻底移除，不可通过任何方式从@nextui-org/react导入；- 迁移至 v2 后，请拥抱“组合优于封装”的理念：用标准 HTML + Tailwind + NextUI 布局组件构建灵活容器；
- 如需统一容器样式，推荐自定义组件而非回退版本；
- 始终以 NextUI v2 官方文档 为准，避免参考 v1 链接（如
v1.nextui.org或v2.nextui.org已失效，正确域名为nextui.org）。遵循上述方案，你既能保持技术栈现代性，又能高效实现专业级布局控制。
