I have recently started diving into Material UI - Grid and this question is a continuation of my previous query about defining CSS classes for Material UI components, specifically the classes.root
Sunny day with a chance of rain I made some changes based on suggestions, but now I am encountering compilation errors such as: Failed to compile ./src/Materialuig.jsx Line 25:31: 'props' is not defined no-undef Line 30:22: 'Paper' is not defined react/jsx-no-undef ..Below is the complete code snippet:
import React from "react";
import MenuIcon from "@material-ui/icons/Menu";
import {
Button,
Icon,
makeStyles,
Grid,
IconButton,
AppBar,
Toolbar,
Typography,
} from "@material-ui/core";
function Materialuig(){
const useStyles = makeStyles({
root: {
backgroundColor: "red",
color: (props) => props.color,
},
});
const classes = useStyles(props);
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
</Grid>
</div>
);
}
export default Materialuig;