我在使用新的 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>
);
}
尝试将风格放入
dangerouslySetInnerHTML
,例如:
return (
<html lang="en">
<head>
<style
dangerouslySetInnerHTML={{
__html: `
:root {
....
}
`,
}}
/>
</head>
<body>
<StyledJsxRegistry>{children}</StyledJsxRegistry>
</body>
</html>
)