Как использовать тему в стилях для пользовательских функциональных компонентов

Question

Когда я пытаюсь скомпилировать приложение, оно отображает определенную ошибку " TypeError: undefined не имеет свойств "
, хотя я хочу отобразить стилизованные компоненты в тегах сетки, хотя в методе компонента на основе функций

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;

Вы также можете деструктурировать реквизиты прямо в определении функции.

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