Skip to content
← Back to rules

nextjs/no-styled-jsx-in-document 正确性

它的作用

禁止在 pages/_document.js 中使用 styled-jsx。

为什么这是个问题?

自定义样式(如 styled-jsx)不允许在 自定义文档 中使用。

示例

此规则的错误代码示例:

javascript
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next.document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
          <style jsx>{`
            body {
              background: hotpink;
            }
          `}</style>
        </body>
      </Html>
    );
  }
}

此规则的正确代码示例:

javascript
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next.document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

如何使用

要通过配置文件或 CLI 启用此规则,可以使用:

json
{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-styled-jsx-in-document": "error"
  }
}
bash
oxlint --deny nextjs/no-styled-jsx-in-document --nextjs-plugin

参考资料