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（开始，结束） 为你的断点，以使其工作，因为你正在覆盖以前的。