在 Next.js 14 中应用全局样式

Question

我在使用新的 Next.js 实现

style jsx global

属性时遇到问题。在之前的文件中，您需要将其添加到

_app.js

文件中，但由于该文件不再存在，我认为它应该添加到代表每个页面的

layout.tsx

文件中，但是当我这样做时，我出现以下错误

'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.

这是我的代码


export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <style jsx global>
        {`
                    :root {
                        --title: ${header.style.fontFamily};
                        --content: ${paragraph.style.fontFamily};
                        --primary: ${colors.primary};
                        --primary-dark: ${colors.primaryDark};
                        --secondary: ${colors.secondary};
                        --secondary-dark: ${colors.secondaryDark};
            --background: ${colors.background};
            --paragraph: ${colors.paragraph};
                `}
      </style>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  );
}

Answer 1

尝试将风格放入

dangerouslySetInnerHTML

，例如：

    return (
        <html lang="en">
            <head>
                <style
                    dangerouslySetInnerHTML={{
                        __html: `
:root {
 ....
}
                    `,
                    }}
                />
            </head>
            <body>
              <StyledJsxRegistry>{children}</StyledJsxRegistry>
            </body>
        </html>
    )

在 Next.js 14 中应用全局样式

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

1个回答

最新问题

在 Next.js 14 中应用全局样式

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

1个回答

最新问题

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