Gridを独自コンポーネントにする

(props) => react.componentにするだけで使えるようになる。

const useStyles = (theme: Theme) => {
    return makeStyles({
        root: {
            flexGrow: 1
        },
        paper: {
            padding: theme.spacing(2),
            textAlign: 'center',
            color: theme.palette.text.secondary

        }
    })
}


const Conainer = (props:any) => <Grid container {...props}/>
const Item = (props:any) => <Grid item {...props}/>



const UnderStandingBreakpoints2 = () => {
    const theme = useTheme()
    const classes = useStyles(theme)()
    return (
        <div className={classes.root}>
            <Conainer spacing={4}>
                <Item xs={12} sm={6} md={3}>
                    <Paper className={classes.paper}>
                        xs = 12 sm = 6 md = 3
                    </Paper>
                </Item>
                <Item xs={12} sm={6} md={3}>
                    <Paper className={classes.paper}>
                        xs = 12 sm = 6 md = 3
                    </Paper>
                </Item>
                <Item xs={12} sm={6} md={3}>
                    <Paper className={classes.paper}>
                        xs = 12 sm = 6 md = 3
                    </Paper>
                </Item>
                <Item xs={12} sm={6} md={3}>
                    <Paper className={classes.paper}>
                        xs = 12 sm = 6 md = 3
                    </Paper>
                </Item>
            </Conainer>
        </div>
    )
};

export default UnderStandingBreakpoints2