警告：来自服务器的额外属性：样式

Question

在我的 Next.js 应用程序中，我收到此警告：

Warning: Extra attributes from the server: style

我不知道这是在哪里发生的，所以没有任何代码可以显示。

Answer 1

我也遇到了同样的问题，结果发现直接将样式添加到

<body>

中的

layout.tsx

会导致它

...

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

 return(
    <html lang="en">
       <body style={{ display: "flex" }}>
         ...
       </body>
    </html>
 )

}

要解决这个问题，请创建一个单独的

styles.css

文件 -> 将正文样式添加到其中 -> 将其导入到

layout.tsx

styles.css：

body {
    display: flex;
}

布局.tsx：

...

import "./globals.css"

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

 return(
    <html lang="en">
       <body>
         ...
       </body>
    </html>
 )

}

注意： 这是在 Next.js 13 中测试的，我不确定其他版本

我确实创建了这个自定义 ThemeContext，但即使我将其注释掉，错误仍然发生：

import { FC, ReactNode } from 'react';
import Providers from '@/redux/provider';
import MainHeader from '@/components/mainheader';
import SideBar from '@/components/sidebar';
// import { ThemeProvider } from '@/context/ThemeContext';
import { User } from '@/types/user';

interface layoutProps {
  children: ReactNode;
}

// const user: User = {
//   theme: 'dark',
// };

const Layout: FC<layoutProps> = ({ children }) => {
  return (
    // <ThemeProvider user={user}>
    <main>
      <MainHeader />
      <SideBar />
      <Providers>{children}</Providers>
    </main>
    // </ThemeProvider>
  );
};

export default Layout;

警告：来自服务器的额外属性：样式

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

1个回答

最新问题

警告：来自服务器的额外属性：样式

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

1个回答

最新问题

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