I am experimenting with a React app using Material UI to explore different features. I'm attempting to customize the components following the original documentation, but making some changes as I am using classes instead of hooks. However, I keep encountering an error: Cannot read property 'root' of undefined. It seems like there are no "classes" in my props, and I'm not sure why.
import React, { Component } from "react";
...
import { withStyles } from "@material-ui/core/styles";
import "./Product.css";
const useStyles = (theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary,
},
});
export class Product extends Component {
constructor(props) {
super(props);
this.state = {
isExpanded: false,
};
}
render() {
const { isExpanded } = this.state;
const { classes } = this.props;
debugger;
return (
<Container maxWidth="lg" className="full-container">
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
</Grid>
</div>
<Accordion
expanded={isExpanded}
onChange={() => this.setState({ isExpanded: !isExpanded })}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
<Typography className="heading">General settings</Typography>
<Typography className="secondaryHeading">
I am an accordion
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis
feugiat. Aliquam eget maximus est, id dignissim quam.
</Typography>
</AccordionDetails>
</Accordion>
</Container>
);
}
}
export default withStyles(useStyles)(Product);
Thank you!