javascript - 找不到名称“withStyles

Question

 import * as React from "react";
 import Button from "@material-ui/core/Button";
 import * as PropTypes from "prop-types";
 import {WithStyles} from '@material-ui/core';
 import "./App.css";
 import PageTwo from "./components/PageTwo";
   const styles = theme => ({
   container: {
   display: "flex",
   flexWrap: "wrap"
   },
   textField: {
   marginLeft: theme.spacing.unit,
   marginRight: theme.spacing.unit,
   width: 200
   },
   menu: {
   width: 200
   }
  });

export interface Items {
objectID?: string;
URL?: string;
}
export interface IPropsk {
data?: Array<Items>;
fetchData?(value: string): void;

}
export interface IState {
 isLoaded: boolean;
 hits: Array<Items>;
 value: string;
}

 const API = "https://hn.algolia.com/api/v1/search?query=";

 export class App extends React.Component<IPropsk, IState> {
 constructor(props: IPropsk) {
 super(props);

 this.state = {
     isLoaded: false,
     hits: [],
     value: ""
 };

  this.handleChange = this.handleChange.bind(this);
 }

  fetchData = event => {
  fetch(API + event)
  .then(response => response.json())
  .then(data => this.setState({ hits: data.hits }));
 };

 handleChange(event) {
 this.setState({ value: event.target.value });
 }
 render() {

return (
  <div>
    <div>
      <TextField
        id="required"
        label="Required"
        defaultValue="Hello World"
        margin="dense"
        value={this.state.value}

        onChange={this.handleChange}
      />

      <Button
        variant="contained"
        color="primary"
        onClick={() => this.fetchData(this.state.value)}
      >
        Search
      </Button>
    </div>
    <div>
      <PageTwo data={this.state.hits} />
    </div>
  </div>
  );
 }
}


export default withStyles(styles);

我写了上面的代码片段来调用方法 fetchData From button click 。它工作正常没有错误。但是当我应用 MateriaUI 来更改组件的样式时(我只想在按钮和 TextField 之间放置一个空格)即使我导入 WithStyles 也会收到以下错误。它来自最后一行。

  Cannot find name 'withStyles

Answer 1

你的导入

从'@material-ui/core'导入{WithStyles};

需要改成

从“@material-ui/core/styles”导入 { withStyles }；