Next js中特定页面的全局样式

dphi5xsq  于 2023-10-18  发布在  其他
关注(0)|答案(3)|浏览(132)

在我的NextJS应用程序中,我有一个/home页面,我需要隐藏x和y溢出。然而,我有另一个/books页面,我需要用户能够滚动。然而,由于Next中只有一个全局样式表,并且在css模块中不允许使用body等全局css选择器,因此我无法找到解决此问题的方法。有什么想法吗?

sdnqo3pr

sdnqo3pr1#

完成!只需将以下内容插入到组件中:

<style global jsx>{`
        html,
        body {
          overflow: hidden;
        }
`}</style>
643ylb08

643ylb082#

您已经给出了如何从特定页面或组件添加全局样式表的一般正确答案。然而,对于在React应用程序中隐藏滚动条的特定情况,我可以建议从react-use包中查看useLockBodyScroll
https://github.com/streamich/react-use/blob/master/docs/useLockBodyScroll.md

4urapxun

4urapxun3#

只需将<style>{'body { overflow: auto; }'}</style>嵌入到您的组件中:

export default function MyPage({ children }) {
  return (
    <>
      <style>{'body { overflow: auto; }'}</style>
      <div>
        something...
        {children}
      </div>
    </>
  )
}

相关问题