Material-UI 断点在 React.js 中不起作用

Question

我正在使用 React.js 制作一个简单的应用程序，我试图更改每个项目的宽度和背景颜色，页面上一行中的项目数。我使用 material-UI 进行响应式设计。然后当我使用 Material-UI 的断点时，它并没有像我预期的那样正常工作。

这（xs, sm, md, lg）个断点中，只有lg个效果好，其他的根本就不行

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',
        },
    }
}));

所以我改变了断点的顺序，然后只有lg没有起作用。点赞关注

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',
        },
    }
}));

如何让所有的断点都正常工作？

Answer 1

我推荐使用 theme.breakpoints.between（开始，结束）为您的断点设置断点以使其正常工作，因为您正在覆盖之前的断点。

Material-UI 断点在 React.js 中不起作用

Material-UI breakpoint is not working in React.js

breakpoints

reactjs

material-ui