Как исправить эту ошибку «Ошибка: вы вызываете withStyles (стили) (компонент) с неопределенным компонентом».

avatar
Daemes
1 июля 2021 в 15:52
510
2
0

Я пытаюсь сделать средство выбора диапазона дат реакции с помощью пользовательского интерфейса материала. Сначала у меня были некоторые проблемы с makeStyles, и я решил их с помощью withStyles : import { withStyles } from '@material-ui/styles';

Теперь у меня такая проблема: "Ошибка: Вы вызываете withStyles(styles)(Component) с неопределенным компонентом."

enter image description here

Вот структура моего кода:

import { withStyles } from '@material-ui/styles';
const useStyles = withStyles((theme) => ({
     ...
)}

function App() {
  const classes = useStyles();

  return (
     ...
  );
}

export default App;

и мои зависимости:

"dependencies": {
    "@date-io/date-fns": "^2.10.11",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^5.0.0-beta.0",
    "@material-ui/icons": "^5.0.0-beta.0",
    "@material-ui/lab": "^5.0.0-alpha.39",
    "@material-ui/pickers": "^4.0.0-alpha.12",
    "@material-ui/styles": "^5.0.0-beta.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "clsx": "^1.1.1",
    "date-fns": "^2.0.0-beta.5",
    "form-data": "^2.5.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-feather": "^2.0.9",
    "react-helmet": "^6.1.0",
    "react-perfect-scrollbar": "^1.5.8",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-toastify": "^7.0.4",
    "react-use-uuid": "^1.1.0",
    "react-uuid": "^1.0.2",
    "recharts": "^2.0.9"
  },

Источник

Ответы (2)

avatar
ינון רחמים
1 июля 2021 в 16:03
0

Согласно документам - https://material-ui.com/styles/basics/#higher-order-component-api - вы предполагаете использовать withStyles вот так -

export default withStyles(stylesObject)(component);

avatar
Nicholas Tower
1 июля 2021 в 16:00
1

withStyles не делает то же самое, что makeStyles. Похоже, вы только что изменили имя функции, которую вы вызываете, но вы все еще относитесь к ней так, как будто она создаст собственный хук. withStyles — это компонент более высокого порядка: вы даете ему компонент, и он возвращает новый компонент, обернутый вокруг вашего. Затем он передает классы вашему компоненту в качестве реквизита.

Если вы хотите использовать withStyles, он должен выглядеть следующим образом:

import { withStyles } from '@material-ui/styles';

function App({ classes }) {
  return (
     ...
  );
}

export default withStyles((theme) => ({
     ...
)})(App);