Styling component in RootLayout #Layout
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
Hey guys. I have an app Layout including components like:
<Header />
{children}
<Footer />
I need to style my Header background and text color depending on which page I route, is it real without using client component with useEffect?
<Header />
{children}
<Footer />
I need to style my Header background and text color depending on which page I route, is it real without using client component with useEffect?
5 Replies
not with a single layout, you need a client component so it re-renders on page changes
client components are still pre-rendered in the server so this is a perfectly fine solution
Transvaal lionOP
@Rafael Almeida
Will it be a good solution if I create a layout ( with nesessary props in Header ) in page folders where I need another styles?
Will it be a good solution if I create a layout ( with nesessary props in Header ) in page folders where I need another styles?
@Transvaal lion <@258390283127881728>
Will it be a good solution if I create a layout ( with nesessary props in Header ) in page folders where I need another styles?
yeah, you can create route groups to avoid repeating it too much
app/
├── layout.tsx
├── (groupA)/
│ ├── layout.tsx
│ └── about/page.tsx
└── (groupB)/
├── layout.tsx
└── foo/page.tsxif you structure your folders like this, you can have a header in
groupA with style A and a different header for the routes in groupB