Материал-пользовательский интерфейс v5 не работает в стиле-компоненты и машинопись?

#reactjs #typescript #material-ui

Вопрос:

Я пытаюсь использовать mui-v5 со стилизованными компонентами и машинописным текстом. Однако даже после того, как я добавил строку в свой tsconfig:

 "paths": {
  "@mui/styled-engine": [ "./node_modules/@mui/styled-engine-sc" ]
}

Я получаю сообщение об ошибке:

Не удалось найти зависимость: ‘@эмоция/стиль’ относительно ‘/node_modules/@mui/styled-engine/index.js’

при выполнении: import { ThemeProvider } from "@mui/material/styles";

Я создал песочницу кода, чтобы показать свою настройку.

Кто-нибудь знает, что я делаю не так?

Ответ №1:

Вам нужно добавить @emotion/styled и @emotion/react в зависимости

1. Но я думал, что весь смысл использования стилизованных компонентов в том, что мне не нужны эмоции

2. Да, я проверил это mui.com/guides/styled-engine в нем говорится, что @emotion/react, @emotion/styled и styled-компоненты являются необязательными одноранговыми зависимостями @mui/material, поэтому вам необходимо установить их самостоятельно.

3. Эти инструкции действительно сбивают с толку. Если это необязательно, не означает ли это, что они вам не нужны?

4. Проверьте, является ли этот код и поле тем, что вы ищете codesandbox.io/s/styled-components-forked-4f88k?file=/src/…

5. наконец. Я читал решения с несколькими парами, которые не исправили это. это помогло, спасибо

Ответ №2:

Вам не нужно ничего добавлять @emotion/styled . В установке mui говорится, что вы можете использовать компоненты эмоций ИЛИ стилей

Я знаю, что инструкции немного сбивают с толку, но я просто скопировал/вставил часть package.json в mui.com/guides/styled-engine/ и это сработало для меня

пакет.json:

 {
  "dependencies": {
    "@mui/material": "^5.0.0",
    "styled-components": "^5.3.1",
  },
  "devDependencies": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
    "@types/styled-components": "^5.1.14",
  },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
  }
}