Nextjs13 AppRouter，为特定页面的body标签添加自定义类

问题描述 投票：0回答：1

使用Nextjs 13的AppRouter，如何自定义内页的body/html标签？

我有一个根布局：

export default async function RootLayout({ children }: { children: ReactNode }) {
  const session = await getServerSession(authOptions);

  return (
    <html lang="en" className={`bg-primary`}>
      <body>
       {children}
      </body>
    </html>
  );
}

并且在

app/myPage/[id]/layout.tsx
中我有一个嵌套布局：

export default function MyPageLayout({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}

我还没有弄清楚如何覆盖/更新 RootLayout 中为特定网址定义的标签。

在这种特殊情况下，我想将 css 属性 

overflow: hidden
添加到该 url 的 body 标记中 
https:/0.0.0.0/myPage/XX

next.js13 app-router
1个回答
0
投票

来到这里，寻找同样的东西。实现此目的的唯一方法是，我在页面结构内创建了一个空的 

layout.tsx
文件，设置为客户端组件并使用 useEffect 进行修改（以防止文档未定义）。

文件结构：

root foolder/
└── src/
    └── app/
        └── route-name/
            ├── page.tsx
            ├── layout.tsx
            └── error.tsx

布局组件（

layout.tsx
）：

'use client'

import { useEffect } from 'react'

export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {

  useEffect(() => {
    document.body.classList.add('overflow-y-hidden');
  }, [])


  return children
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.