CODEWITHSUNDEEP
reactjsmaterial-ui
Eclz
Eclz

Reputation: 23

How to use theme in styles for custom functional components

When I try compiling the app it displays a certain error "TypeError:undefined has no properties"
though I want to render styled components into the grid tags though in function based component method
enter image description here

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

Upvotes: 1

Views: 175

Answers (1)

Drew Reese
Drew Reese

Reputation: 203542

Access or destructure classes from props, not this.props.

const { classes } = props;

You can also destructure props right in the function definition.

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

Upvotes: 1

Related Questions