Question

我正致力于在 material-ui 中设计我自己的分页项目。所以我为分页项目创建了一个包装器，总体思路是上一个和下一个按钮位于屏幕的外角，而页码居中。

所以我只想为“下一个”和“上一个”按钮添加一些样式。我会说类似使用theme.breakpoints：

const useStyles = makeStyles((theme) => ({
    root: (props: PaginationItemProps) => ({
        fontWeight: 600,
        fontSize: '24px',
        width: '90px',
        [theme.breakpoints.only('xs')]: {
            width: '40px',
            height: '40px',
            position: 'absolute'
        }
    }
}));

或者像 css 伪类：

const useStyles = makeStyles((theme) => ({
    root: (props: PaginationItemProps) => ({
        fontWeight: 600,
        fontSize: '24px',
        width: '90px',
        '& > li:first-child, & > li:last-child': {
            width: '40px',
            height: '40px',
            position: 'absolute'
        }
    }
}));

现在我已经看到您可以添加一个返回项目的函数。但是，在这种情况下，您需要将每个项目返回两次，而将所有内容都执行两次似乎是不合逻辑的。

所以我想知道是否有其他解决方案可以使用道具来做到这一点。

您可以在 makeStyles 中对道具进行分组吗？

0 个答案: