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的操作，单击按钮即可。但是当我应用MateriaUI更改组件的样式时（我只想在按钮和TextField之间放置一个空格），即使我导入WithStyles，也会出现以下错误。它来自最后一行。

  Cannot find name 'withStyles

Answer 1

您的导入

import {WithStyles} from '@material-ui/core';

需要更改为

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

Answer 2

您正在导入WithStyles，请注意W已设置上限，请使用

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

将底行移到下面，它应该可以工作。

export default withStyles(styles);

Answer 3

我认为您需要安装核心模块以将其添加到依赖项中，

npm install @material-ui/core

或

yarn add @material-ui/core

谢谢

找不到名称'withStyles

3 个答案: