Skip to content
← Back to rules

nextjs/no-styled-jsx-in-document Correctness

它的作用

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

为什么这不好?

像 styled-jsx 这样的自定义 CSS 不允许出现在 Custom Document 中。

示例

以下是此规则的错误代码示例:

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>
    );
  }
}

如何使用

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-styled-jsx-in-document": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["nextjs"],
  rules: {
    "nextjs/no-styled-jsx-in-document": "error",
  },
});
bash
oxlint --deny nextjs/no-styled-jsx-in-document --nextjs-plugin

版本

此规则在 v0.3.3 中添加。

参考资料