英文:
Styling specific routes with different background colors in Next.js and Tailwind CSS
问题
我目前正在使用 Next.js 13 和 Tailwind CSS 构建一个作品集网站。在我的项目中，我使用了应用程序路由，并且我有一个侧边栏组件，在每个路由上都保持不变。大多数页面共享相同的背景颜色，但我需要为特定的路由应用不同的背景颜色。
为了实现这一点，我尝试通过使用一个 <div> 元素覆盖整个页面来更改特定路由的背景颜色。然而，在使用这种方法时，我遇到了响应性方面的问题。
以下是一些截图，以提供视觉上下文：
截图1：layout.jsx，带有侧边栏和共享的背景颜色（大多数页面）：
截图2：侧边栏组件
截图3：
截图4：尝试使用 <div> 覆盖整个页面更改背景颜色：
我明白直接将背景颜色应用于 body 元素可能不是最佳的方法，但我不确定是否有其他选择。我正在寻求关于如何正确地为特定路由应用不同的背景颜色的指导，同时保持侧边栏的持续性并保持响应性。
感谢您的帮助。
英文:
I'm currently working on building a portfolio website using Next.js 13 and Tailwind CSS. In my project, I'm using app routing, and I have a Sidebar component that remains persistent on every route. Most of the pages share the same background color, but I need to apply different background colors to specific routes.
To achieve this, I tried changing the background color of the specific route by using a <div> element to cover the full page. However, I'm facing issues with maintaining responsiveness when using this approach.
Here are some screenshots to provide visual context:
Screenshot 1: layout.jsx with Sidebar and shared background color (most pages):
Screenshot 2: sidebar component
Screenshot 3:
enter image description here
Screenshot 4: Attempt to change background color with a <div> covering the full page:
I understand that applying the background color directly to the body element may not be the optimal approach, but I'm unsure of the alternatives. I'm seeking guidance on how to properly style specific routes with different background colors while keeping the Sidebar persistent and maintaining responsiveness.
Thank you for your assistance.
答案1
得分: 0
为了避免重复，这些多个布局可以使用相同的组件，该组件将接受一个参数（在您的情况下可能是sideBarBackgroundColor）。
英文:
You can use multiple root layouts as described over here.
To prevent duplication, these multi layouts can use the same component that will take a parameter (sideBarBackgroundColor maybe in your case).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论