如何在TS / NextJS项目中设置JSS？

Question

我正在尝试使用React，TypeScript，NextJS和Material-UI设置一个基本的Web应用程序。我遇到的问题是我拥有的项目中的设置样式。我已经设置了一个CodeSandbox environment来说明我的问题。

无法在classes.list的第77行插入Header.tsx属性

我的代码主要基于使用withStyles HOC的this example，并且还查看了MaterialUI文档的this page。但是，它仍然产生以下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

也可以在上面链接的CodeSandbox上看到错误。我不确定错误是否是由于NextJs的某些特殊原因引起的，因为MaterialUI存储库中的TS示例似乎可以正常工作。有人做过类似的事情吗？还是我试图以一种完全非传统的方式做到这一点？

Answer 1

您使用的导出错误是原因。 更改此：

export { Header } from "./Header/Header";

对此：

import Header from "./Header/Header";

export { Header };

Sandbox modified version

顺便说一句，下一次关于命名（索引，索引事物）的操作不必那么复杂。如果您使用的是Nextjs，请按照他们的示例操作，不要在pages目录中创建另一个components目录。