材料Ui代码在代码方面工作得很好，但在VSCODE中却没有？

Question

我正在使用Material在我的ReactJS项目中创建"Material“，这段代码在沙箱中正常工作，但在VS代码中没有工作。我该怎么办？

我检查了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"
  }

我期望得到沙箱给出的输出，但是得到了这个错误

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代码package.json中使用的是3.9.2版本。我很确定这就是问题所在，尝试使用完全相同的版本，而不是使用latest。

见此处：https://codesandbox.io/embed/material-demo-1j37n