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

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

我在使用新的 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>
  );
}

javascript reactjs next.js global-variables styled-components
1个回答
0
投票

尝试将风格放入

dangerouslySetInnerHTML
,例如:

    return (
        <html lang="en">
            <head>
                <style
                    dangerouslySetInnerHTML={{
                        __html: `
:root {
 ....
}
                    `,
                    }}
                />
            </head>
            <body>
              <StyledJsxRegistry>{children}</StyledJsxRegistry>
            </body>
        </html>
    )
© www.soinside.com 2019 - 2024. All rights reserved.