如何在自定义功能组件的样式中使用主题

Question

当我尝试编译应用程序时，它会显示某些错误“ TypeError：未定义没有属性”。
尽管我希望将样式化的组件呈现到基于功能的组件方法中的网格标签中

const styles = theme => ({

    root: {
        height: '100vh',
      },
      image: {

    },
    paper: {
        margin: theme.spacing(8, 4),

    },
    avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main,
    },
    form: {
        width: '100%', 
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(3, 0, 2),      
    },
});


const SignIn = (props) => {

    const classes = this.props;

        return(
            <Grid container component="main" className={classes.root}>
            <CssBaseline />
            <Grid item xs={false} sm={4} md={7} className={classes.image} />

            <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
                <div className={classes.paper}>
                <Typography component="h1" variant="h5">
                    Welcome to web
                </Typography>
                <Avatar className={classes.avatar}>
                    <LockOutlinedIcon />
                </Avatar>
                <form className={classes.form} noValidate>
                   //content
                 </form>
                </div>

            </Grid>

        </Grid>
        );
    }

export default withStyles(styles)(SignIn);

Answer 1

从道具而不是classes进入this.props或从中破坏。

const { classes } = props;

您也可以在函数定义中解构props。

const SignIn = ({ classes }) => {...