小编Pha*_*tom的帖子

我正在尝试将Next.js与Typescript和Material UI一起使用。有无数的在线教程如何Next.js设立工作，材料UI，和所有的人似乎可以用完全一样的代码_document.js，并_app.js分别。

我已经尝试将代码_document.js稍微调整为打字稿_document.tsx，并按原样复制粘贴它，但每次我遇到同样的问题，即每当我尝试使用<Head />外部_document.tsx，甚至只是内部_app.tsx来设置一个标题和视口元，正如教程中的代码所暗示的那样，我收到了一条非常无用的错误消息（下面包含完整的堆栈跟踪）：

TypeError: Cannot destructure property 'styles' of 'this.context' as it is null.

我在我之前的一个项目中遇到了完全相同的问题，这就是为什么我既惊讶又沮丧的是，似乎没有人与我有同样的问题，而且我能找到的每个教程都包含完全相同的代码似乎对我不起作用。

这是我的代码：

_document.tsx

import React from "react";
import Document, { DocumentContext, DocumentInitialProps, Head, Html, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/core/styles";
import theme from "../constants/theme";

class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head>
                    <meta name="theme-color" content={theme.palette.primary.main} /> …