Блог

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

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

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

 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"
  },
 

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

Если вы хотите использовать withStyles , он должен выглядеть так:

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

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

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

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

export default withStyles(stylesObject)(component);