In my NextJS app, I have a /home page in which I need x and y overflow to be hidden. However, I have another /books page in which I need the user to be able to scroll. However, as there is only one global stylesheet in Next and global css selectors like body are not allowed in css modules, I could not find a way to get around this. Any ideas?
Global styles for specific pages in next js
Viewed 1048
2 Answers
Done! Just insert the following into the component:
<style global jsx>{`
html,
body {
overflow: hidden;
}
`}</style>
You already gave the general right answer how to add global stylesheets from specific page or component. However, for this specific case of hiding scrollbar in React application, I can suggest to take a look at useLockBodyScroll from package react-use.
https://github.com/streamich/react-use/blob/master/docs/useLockBodyScroll.md
Related