Блог

Главная - Вопросы по программированию - Как мне настроить JSS в проекте TS / NextJS?

Как мне настроить JSS в проекте TS / NextJS?

#reactjs #typescript #material-ui #next.js

#reactjs #typescript #материал-пользовательский интерфейс #next.js

Вопрос:

Я пытаюсь настроить базовое веб-приложение, используя React, TypeScript, NextJS и Material-UI. Проблема, с которой я сталкиваюсь, связана с настройкой стилей в рамках проекта, который у меня есть. Я настроил среду CodeSandbox, которая иллюстрирует мою проблему.

Он не может ввести classes.list свойство в строке 77 в Header.tsx

Я основал свой код в основном на этом примере, в котором используется withStyles HOC, а также просмотрел эту страницу документации MaterialUI . Тем не менее, он по-прежнему выдает следующую ошибку:

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

Ошибку также можно увидеть в CodeSandbox, связанном выше. Я не уверен, что ошибка связана с какой-то особенностью работы NextJS, поскольку кажется, что пример TS из репозитория MaterialUI работает нормально. Кто-нибудь делал что-то подобное? Или я пытаюсь сделать это совершенно неортодоксальным способом?

Ответ №1:

Вот почему вы используете неправильный экспорт. Измените это:

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

К этому:

 import Header from "./Header/Header";

export { Header };

Модифицированная версия песочницы

Кстати, в следующий раз не будь таким сложным в именовании (индекс, индексная вещь). Если вы используете Nextjs, просто следуйте их примеру, не создавайте другой pages каталог в components directory .

Комментарии:

1. Спасибо! Не могли бы вы также объяснить, почему это вызывает ошибку? Или указать на какую-нибудь статью, которая объясняет это? На мой взгляд, эти два утверждения должны работать одинаково. Кроме того, да, я знаю, что страниц в компонентах слишком много, и я это исправлю.

2. Я только что заметил, что после применения исправления в вашем комментарии оно работает нормально, но после обновления страницы все остальные CSS исчезают со страницы. Есть какие-либо подсказки по этому поводу?

3. Это может быть потенциальной проблемой material-ui , мне нравится material design, но этот пакет не является полезным имхо.

4. Что, по вашему мнению, было бы лучшей альтернативой?

5. Попробуйте это: mdbootstrap.com . Разберитесь сами, по моему первому впечатлению, это выглядит лучше.