Gridにスタイルをあてる

makeStylesを使う。

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

        }
    })
}

これをuseStyleしてやればよいだけ。

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

export default UnderStandingBreakpoints

サイズは

xs>0px sm>=600px md>=960px lg>1280px xl>1920px

で適応される。画面全体は12分割されそのうちどのわりあいになるかを指定している。