Material-UI breakpoint is not working in React.js

Question

I am making a simple application with React.js and I tried to change each item's width and background color, number of items in one row on a page. I used material-UI for responsive design. Then when I use breakpoints of Material-UI, it was not working well as I expected.

Among these (xs, sm, md, lg) breakpoints, only lg worked well, but others are not working at all.

const useStyles = makeStyles((theme) => ({
    userItem: {
        height: 200,
        margin: 10,
        [theme.breakpoints.down('xs')]: {
            width: '45%',
            margin: '0.5%',
            backgroundColor: '#faa',
        },
        [theme.breakpoints.down('sm')]: {
            width: '24%',
            margin: '0.5%',
            backgroundColor: '#faf',
        },
        [theme.breakpoints.down('md')]: {
            width: '19%',
            margin: '0.5%',
            backgroundColor: '#ffa',
        },
        [theme.breakpoints.down('lg')]: {
            width: '15%',
            margin: '0.5%',
            backgroundColor: '#afa',
        },
        [theme.breakpoints.up('lg')]: {
            width: '13%',
            margin: '0.5%',
            backgroundColor: '#aaf',
        },
    }
}));

So I changed the order of breakpoints, then only lg didn't work. Like following.

const useStyles = makeStyles((theme) => ({
    userItem: {
        height: 200,
        margin: 10,
        [theme.breakpoints.up('lg')]: {
            width: '13%',
            margin: '0.5%',
            backgroundColor: '#aaf',
        },
        [theme.breakpoints.up('lg')]: {
            width: '13%',
            margin: '0.5%',
            backgroundColor: '#aaf',
        },
        [theme.breakpoints.down('md')]: {
            width: '19%',
            margin: '0.5%',
            backgroundColor: '#ffa',
        },
        [theme.breakpoints.down('sm')]: {
            width: '24%',
            margin: '0.5%',
            backgroundColor: '#faf',
        },
        [theme.breakpoints.down('xs')]: {
            width: '45%',
            margin: '0.5%',
            backgroundColor: '#faa',
        },
    }
}));

How to make all breakpoints work well?

Answer 1

I recommend using theme.breakpoints.between(start, end) for your breakpoints in order to make it work because you are overriding the previous ones.