Overriding Layout CSS for specific page
Answered
Giant Angora posted this in #help-forum
Giant AngoraOP
I have a root layout in next js with
How can I override it on only one specific page?
my-8 for <main> and its children, I want to have a homepage which can override it and have no margin on topconst 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
8 Replies
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
yes, or another recommendation if you don't want to overcomplicate your code:
Wrap
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.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)
Giant AngoraOP
I see, so the page on which I want to implement this is the home page, can I still do it there?
Yep, like
pathname === "/" for landing pageor for route groups:
(home)/layout.tsx
(home)/page.tsx
(dashboard)/...Giant AngoraOP
Thanks a lot