React JS with Material UI - 使用 withStyles 时 this.props 未定义

Question

当我运行下面的代码时，我预计 styles 将被注入道具内部，但我总是最终得到未定义的道具。

我没有为此组件提供任何道具。

const styles = theme => ({
    root: {
      '& .MuiTextField-root': {
          margin: theme.spacing(1),
          width: '25ch',
      },
    },
});

class Editor extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <div className="editor">
        <form className={classes.root} noValidate autoComplete="off">
          <TextField id="standard-basic" label="Standard" />
          <Button variant="contained" color="primary">
            Hello World
          </Button>
        </form>
      </div>
    );
  }
}

export default withStyles(styles)(Editor);

Answer 1

您好，您可以使用来自“@material-ui/core/styles”的makeStyles 。 请检查下面的完整示例：

import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import FormLabel from '@material-ui/core/FormLabel';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    paper: {
        height: 140,
        width: 100,
    },
    control: {
        padding: theme.spacing(2),
    },
}));

export default function SpacingGrid() {
    const [spacing, setSpacing] = React.useState(2);
    const classes = useStyles();

    const handleChange = (event) => {
        setSpacing(Number(event.target.value));
    };

    return (
        <Grid container className={classes.root} spacing={2}>
            <Grid item xs={12}>
                <Grid container justify="center" spacing={spacing}>
                    {[0, 1, 2].map((value) => (
                        <Grid key={value} item>
                            <Paper className={classes.paper}/>
                        </Grid>
                    ))}
                </Grid>
            </Grid>
            <Grid item xs={12}>
                <Paper className={classes.control}>
                    <Grid container>
                        <Grid item>
                            <FormLabel>spacing</FormLabel>
                            <RadioGroup
                                name="spacing"
                                aria-label="spacing"
                                value={spacing.toString()}
                                onChange={handleChange}
                                row
                            >
                                {[0, 1, 2].map((value) => (
                                    <FormControlLabel
                                        key={value}
                                        value={value.toString()}
                                        control={<Radio/>}
                                        label={value.toString()}
                                    />
                                ))}
                            </RadioGroup>
                        </Grid>
                    </Grid>
                </Paper>
            </Grid>
        </Grid>
    );
}

资源