Next.js Discord

Discord Forum

Overriding Layout CSS for specific page

Answered
Giant Angora posted this in #help-forum
Open in Discord
Avatar
Giant AngoraOP
I have a root layout in next js with my-8 for <main> and its children, I want to have a homepage which can override it and have no margin on top
const RootLayout = ({ children }: PropsWithChildren) => {
  return (
    <html lang="en" className={`${outfit.variable}`}>
      <body className="bg-gray-900 min-h-screen flex flex-col">
        <Navbar />
        <main className="flex-grow my-8 md:my-24 space-y-16">{children}</main>
        <Footer />
      </body>
    </html>
  );
};

How can I override it on only one specific page?
Answered by risky
then you shouldn't add it, [route groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) can be a good compromise for having a different layout file but not any pathname changes
View full answer

8 Replies

Avatar
risky
then you shouldn't add it, [route groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) can be a good compromise for having a different layout file but not any pathname changes
Answer
Avatar
fuma šŸ’™ joulev
yes, or another recommendation if you don't want to overcomplicate your code:

Wrap body/html in a client component, so that you can use usePathname + twMerge to determine which class name should be displayed for each page.
Avatar
risky
that is a good option ngl
but you just have to remember to keep that list up to date on what is used (where the folder could simplify that) - but also over complicate other things... (as you have to abstract out the function to have the other other classnames)
Avatar
Giant AngoraOP
I see, so the page on which I want to implement this is the home page, can I still do it there?
Avatar
fuma šŸ’™ joulev
Yep, like pathname === "/" for landing page
or for route groups:
(home)/layout.tsx
(home)/page.tsx
(dashboard)/...
Avatar
Giant AngoraOP
Thanks a lot