在我的NextJS应用程序中,我有一个/home页面,我需要隐藏x和y溢出。然而,我有另一个/books页面,我需要用户能够滚动。然而,由于Next中只有一个全局样式表,并且在css模块中不允许使用body等全局css选择器,因此我无法找到解决此问题的方法。有什么想法吗?
/home
/books
body
sdnqo3pr1#
完成!只需将以下内容插入到组件中:
<style global jsx>{` html, body { overflow: hidden; } `}</style>
643ylb082#
您已经给出了如何从特定页面或组件添加全局样式表的一般正确答案。然而,对于在React应用程序中隐藏滚动条的特定情况,我可以建议从react-use包中查看useLockBodyScroll。https://github.com/streamich/react-use/blob/master/docs/useLockBodyScroll.md
react-use
useLockBodyScroll
4urapxun3#
只需将<style>{'body { overflow: auto; }'}</style>嵌入到您的组件中:
<style>{'body { overflow: auto; }'}</style>
export default function MyPage({ children }) { return ( <> <style>{'body { overflow: auto; }'}</style> <div> something... {children} </div> </> ) }
3条答案
按热度按时间sdnqo3pr1#
完成!只需将以下内容插入到组件中:
643ylb082#
您已经给出了如何从特定页面或组件添加全局样式表的一般正确答案。然而,对于在React应用程序中隐藏滚动条的特定情况,我可以建议从
react-use
包中查看useLockBodyScroll
。https://github.com/streamich/react-use/blob/master/docs/useLockBodyScroll.md
4urapxun3#
只需将
<style>{'body { overflow: auto; }'}</style>
嵌入到您的组件中: