如何在 _document.js (Next.js) 中制作条件溢出样式

Question

如何根据页面更改 html 和正文溢出样式。

例如在关于页面 html 溢出被隐藏，但正文不是，然后对于联系页面正文溢出被隐藏而 html 不是

这个问题是由于我在项目中途从 vanilla css 切换到 Next UI 库而引起的。 我正在寻找最快的解决方案，即使它有点老套。

这是我尝试过的一些伪代码：

<Html lang="en" if aboutpage style={{ overflow: "hidden" } else: style={{ overflow: "scroll" }}>
  <Head>{CssBaseline.flush()}</Head>


import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
import { useRouter } from "next/router";


class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: React.Children.toArray([initialProps.styles])
    };
  }


  // const router = useRouter();   //causing an error?
  // console.log(router.pathname);
  render() {
    return (
      <Html lang="en" style={{ overflow: 'scroll' }}>
        <Head>{CssBaseline.flush()}</Head>
        <body  style={{ overflow: 'hidden' }}>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

谢谢！

我试着写一些伪代码。 我不确定如何放置条件语句代码来更改 Html 标签和 Body 样式。

Answer 1

您应该能够更新 html 和正文溢出属性，只需通过您想要的任何页面上的useEffect()挂钩即可。 例如在你的关于页面中，你可以运行这个：

// On your about page for example
useEffect(() => {
    document.documentElement.style.overflow = "hidden";
    document.body.style.overflow = "scroll";
}, []);

页面首次呈现后，您可以根据需要编辑 html 标签和body的documentElement样式。

如何在 _document.js (Next.js) 中制作条件溢出样式

问题描述

1 个解决方案

解决方案1
0 2022-12-27 05:52:04

如何在 _document.js (Next.js) 中制作条件溢出样式

问题描述

1 个解决方案

解决方案1 0 2022-12-27 05:52:04

解决方案1
0 2022-12-27 05:52:04