Load CSS for <html> only on one page
Answered
Sloth bear posted this in #help-forum
Sloth bearOP
Hello there,
I want to set a scroll effect for my page:
Is there a way to tell NextJS "Load this CSS only on this page and not on every page?".
I want to set a scroll effect for my page:
html { scroll-snap-type: y mandatory; } but I can't figure out how to automatically remove this CSS style when I navigate to another page.Is there a way to tell NextJS "Load this CSS only on this page and not on every page?".
Answered by joulev
you are close. just remove <Head> and it works
import Link from "next/link";
export default function Page() {
return (
<>
<style>{`html { background-color: black; color: white; }`}</style>
<Link href="/">White</Link>
</>
);
}58 Replies
@Sloth bear Hello there,
I want to set a scroll effect for my page: `html { scroll-snap-type: y mandatory; }` but I can't figure out how to automatically remove this CSS style when I navigate to another page.
Is there a way to tell NextJS "Load this CSS only on this page and not on every page?".
Make a css file with that content
Import the css file to that page only, not the root layout
Import the css file to that page only, not the root layout
@joulev Make a css file with that content
Import the css file to that page only, not the root layout
Sloth bearOP
How can I do this?
@Sloth bear How can I do this?
import "./mypage.css"
and write your styles inside that file
Sloth bearOP
I have this code for my first page:
import "@/styles/myCSS.scss"
export default function () {
return (
<p>Site 1</p>
);
}
and this Code for my 2nd page:
export default function () {
return (
<p>Site 2</p>
);
}
My scss file is body { background: black }
When I navigate from /page1 to /page2 my background is still black
import "@/styles/myCSS.scss"
export default function () {
return (
<p>Site 1</p>
);
}
and this Code for my 2nd page:
export default function () {
return (
<p>Site 2</p>
);
}
My scss file is body { background: black }
When I navigate from /page1 to /page2 my background is still black
English Lop
// pages/scrollPage.js
import Head from 'next/head';
import React from 'react';
const ScrollPage = () => {
return (
<>
<Head>
<style>
{html {
scroll-snap-type: y mandatory;
}
}
</style>
</Head>
<div>
{/* Your page content goes here */}
<h1>This page has a scroll snap effect!</h1>
<div style={{ height: '200vh' }}>Scroll down to see the effect.</div>
</div>
</>
);
};
export default ScrollPage;stop spamming
Netherland Dwarf
You can use modules
Css modules so there is no conflict for styling
@Netherland Dwarf You can use modules
Sloth bearOP
how can I use a module on the <html> Tag?
make the css file end in
.module.css and import that into the page@riský make the css file end in `.module.css` and import that into the page
Sloth bearOP
yeah I know how to use it for a div for example, but I can't create a <html> Tag on my component and use the module there
oh ok, i havent really it, sorry
Netherland Dwarf
So you want to style an html tag
Lets say inside the layout file
But only apply it for a single page
@English Lop `// pages/scrollPage.js
import Head from 'next/head';
import React from 'react';
const ScrollPage = () => {
return (
<>
<Head>
<style>
{`
html {
scroll-snap-type: y mandatory;
}
`}
</style>
</Head>
<div>
{/* Your page content goes here */}
<h1>This page has a scroll snap effect!</h1>
<div style={{ height: '200vh' }}>Scroll down to see the effect.</div>
</div>
</>
);
};
export default ScrollPage;`
Sloth bearOP
I tried your code, but I don't have any styles on my html Tag now
yeah i was going to say inline styles ftw
@Netherland Dwarf But only apply it for a single page
Sloth bearOP
yes
Netherland Dwarf
Oh okay. Is the current code snippet working for you
As showed in the pic you posted with inline style
@Netherland Dwarf Oh okay. Is the current code snippet working for you
Sloth bearOP
No, the style doesn't apply (see pic 2)
Netherland Dwarf
Is this for next.js 14.0.2
I heard head is deprecated
For next 14
@Netherland Dwarf Is this for next.js 14.0.2
Sloth bearOP
"next": "14.2.3"
like app or pages dir is what was meant here
Netherland Dwarf
Oh okay, let me check then if head component does work for app router
head component isnt in app dir
but you can add inline styles anywhere
Netherland Dwarf
If scroll to bottom it says cant add attributes to html with head
Not sure if this means for styles
Someone corrct me if thats wrong
Also what are you trying to do
@Netherland Dwarf https://nextjs.org/docs/pages/api-reference/components/head
thats pages dir docs
Netherland Dwarf
Oops oh ok
@Netherland Dwarf Not sure if this means for styles
and yeah that shouldnt mean anything for styles as its not an attribute
Netherland Dwarf
Oh okay 👍
The other solution is had in mind is more hacky
Its to add an id to the html tag
And in use effect for that page add the styling
oh no thats hacky
Netherland Dwarf
Its just basic js dom manipulation getelementbyid
And append the classname using the css ssme module for the page
Thats it
Sloth bearOP
I made a small example project. You have to run npm i and go to /page1
Netherland Dwarf
Sorry but i dont download files in these channels
You can paste a small code snippet or pic.
But what i was saying was something like this
@English Lop `// pages/scrollPage.js
import Head from 'next/head';
import React from 'react';
const ScrollPage = () => {
return (
<>
<Head>
<style>
{`
html {
scroll-snap-type: y mandatory;
}
`}
</style>
</Head>
<div>
{/* Your page content goes here */}
<h1>This page has a scroll snap effect!</h1>
<div style={{ height: '200vh' }}>Scroll down to see the effect.</div>
</div>
</>
);
};
export default ScrollPage;`
you are close. just remove <Head> and it works
import Link from "next/link";
export default function Page() {
return (
<>
<style>{`html { background-color: black; color: white; }`}</style>
<Link href="/">White</Link>
</>
);
}Answer
Netherland Dwarf
<html id=“html”/>
…
Page.tsx
…
Import styles from “../.module.css”
useEffect(()=>{
Const el= doc.getElemetById(“html”);
If(!el ) return
el.classLists.append(styles.html)
},[])
…
Page.tsx
…
Import styles from “../.module.css”
useEffect(()=>{
Const el= doc.getElemetById(“html”);
If(!el ) return
el.classLists.append(styles.html)
},[])
Thats what the logic would like with the “hacky solution” just 2-3 lines of code but would need to use comp as a client or create a custom hook and add it to a dummy element that is marked as use client and add to server component
next-themes, it has built in support for thatnvm, need to check a bit more
yup,
next-themes support it, though you need a client component with usePathname for this forced theme logic to work (app router)@joulev you are close. just remove <Head> and it works
tsx
import Link from "next/link";
export default function Page() {
return (
<>
<style>{`html { background-color: black; color: white; }`}</style>
<Link href="/">White</Link>
</>
);
}
Sloth bearOP
yeah thanks so much, that's what I was looking for
Netherland Dwarf
!marked