Next.js 定义样式组件减少 HTTP 请求

样式组件

为了减少HTTP请求CSS样式，将样式作为组件。

错误信息

可能会出现以下错误。

⨯ ./src/app Invalid import 'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component. The error was caused by using 'styled-jsx'. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

错误原因

Style样式组件只能用在Client Component中。

解决方法

文件首行声明是客服端组件，使用'use client'。

完整代码

'use client'

export default function GlobalStyle() {
    return (
        <style global jsx>{`
            html,
            body {
                max-width: 100vw;
                overflow-x: hidden;
            }

            * {
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }
        `}</style>
    )
}