我目前正在使用Next.js 13和Tailwind CSS构建一个投资组合网站。在我的项目中，我使用应用程序路由，我有一个在每个路由上保持持久性的侧边栏组件。大多数页面共享相同的背景颜色，但我需要对特定的路线应用不同的背景颜色。
为了实现这一点，我尝试通过使用一个元素来覆盖整个页面来更改特定路线的背景颜色。然而，我在使用这种方法时面临着保持响应性的问题。
以下是一些屏幕截图，以提供视觉环境：
截图一：带有边栏和共享背景色的layout.jsx（大多数页面）：
enter image description here
截图二：侧边栏组件
enter image description here的
截图三：enter image description here的
截图四：尝试更改覆盖整个页面的背景色：
enter image description here的
我知道直接将背景颜色应用到body元素上可能不是最佳方法，但我不确定还有其他选择。我正在寻求指导如何正确的风格与不同的背景颜色的特定路线，同时保持侧边栏持久和维持响应。
谢谢你的帮助。
1条答案
按热度按时间iyfjxgzm1#
您可以使用多个根布局，如这里所述。
https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
为了防止重复，这些多布局可以使用相同的组件，将采取一个参数（sideBarBackgroundColor可能在您的情况下）。