来自With Style的访问类

时间:2018-08-24 09:21:47

标签: reactjs material-ui typescript2.0

     import * as React from "react";
     import Button from "@material-ui/core/Button";
     import * as propTypes from "prop-types";
     import { withStyles } from "@material-ui/core/styles";     
     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: ""
     };

   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)(App);

我在上面的代码段中编写了调用方法fetchData的操作,单击按钮即可。但是当我应用MateriaUI更改组件的样式时(我只想更改文本字段和按钮t的大小),我想访问样式组件中的类。如何从文本字段访问它

0 个答案:

没有答案