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

Posted 2023-02-22

【中文标题】next js 中特定页面的全局样式

【英文标题】：Global styles for specific pages in next js

【发布时间】：2021-11-03 21:38:34

【问题描述】：

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

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

完成！只需在组件中插入以下内容：

<style global jsx>`
        html,
        body 
          overflow: hidden;
        
`</style>

【参考方案2】：

您已经给出了如何从特定页面或组件添加全局样式表的一般正确答案。但是，对于这种在 React 应用程序中隐藏滚动条的特定情况，我建议您查看 react-use 包中的 useLockBodyScroll。

https://github.com/streamich/react-use/blob/master/docs/useLockBodyScroll.md