Материал Ui-кода отлично работает в codepen, но не в VSCODE?

Question

Я использую Material-UI для создания «Материальных вкладок» в моем проекте ReactJS, этот код работает правильно в SANDBOX, но не в моем VS CODE. Что мне делать?

Я проверил Node для установки, проверил и установил все версии зависимостей из NPM. Я также проверил это. отметьте это , но я не могу этого понять.

import React from "react";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import { makeStyles } from "@material-ui/core/styles";
import { withStyles } from "@material-ui/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
function TabContainer({ children, dir }) {
  return (
    <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
      {children}
    </Typography>
  );
}
const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    width: 500
  }
}));

class Feature extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }
  handleChange() {
    this.state.value === 0
      ? this.setState({ value: 1 })
      : this.setState({ value: 0 });
  }
  render() {
    const classes = this.props;
    const theme = this.props;
    return (
      <div className={classes.root}>
        <Tabs
          value={this.state.value}
          onChange={this.handleChange.bind(this)}
          indicatorColor="primary"
          textColor="primary"
        >
          <Tab label="A" />
          <Tab label="B" />
        </Tabs>
        <SwipeableViews
          axis={theme.direction === "rtl" ? "x-reverse" : "x"}
          index={this.state.value}
        >
          <TabContainer dir={theme.direction}>Item One</TabContainer>
          <TabContainer dir={theme.direction}>Item Two</TabContainer>
        </SwipeableViews>
      </div>
    );
  }
}
Feature.propTypes = {
  classes: PropTypes.object.isRequired
};
export default withStyles(useStyles)(Feature);

А мой package.json выглядит как

  "dependencies": {
    "@material-ui/core": "^3.9.2",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/styles": "^4.0.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "react-slick": "^0.23.2",
    "react-swipeable-views": "^0.13.3",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  }

Я ожидаю вывод, как указано SANDBOX , но вместо этого получил эту ошибку

TypeError: Object(...) is not a function
const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    width: 500
  }
}));

в коде выше.

Answer 1

В вашей песочнице вы используете @material-ui/core latest версию (которая в настоящее время 4.0.1), а в вашем VS Code package.json это версия 3.9.2.Я почти уверен, что это проблема, попробуйте оба варианта с одной и той же версией вместо использования latest.

См. Здесь: https://codesandbox.io/embed/material-demo-1j37n