javascript - Grid 项目内的排版扩展了整个网格

Question

我正在卡片内制作一个网格，目的是在上面显示带有文本的倒计时，问题是倒计时上方的文本会使网格扩展并增加我在项目之间设置的间距，即使有显然有足够的文字空间

这是我的代码

const CountDown = (props) => {

    const theme = useTheme()

    const useStyles = makeStyles({
        root: {
          padding : theme.spacing(4)
        },
        ctnt : {
            padding: 0,
            "&:last-child": {
            paddingBottom: 0
            }
        }
      });

    const classes = useStyles();
    
    return (
        <Card className={classes.root}>
            <CardContent className={classes.ctnt}>
                <Grid container spacing={4} sm>
                    <Grid item xs={12}>
                        <Typography variant="h2">COUNTDOWN</Typography>
                    </Grid>
                    <Grid item xs={3}>
                        <Display unit="Days">{props.days}</Display>
                    </Grid>
                    <Grid item xs={3}>
                        <Display unit="Hours">{props.hours}</Display>
                    </Grid>
                    <Grid item xs={3}>
                        <Display unit="Minutes">{props.minutes}</Display>
                    </Grid>
                    <Grid item xs={3}>
                        <Display unit="Seconds">{props.seconds}</Display>
                    </Grid>
                </Grid>
            </CardContent>
        </Card>
    );
};

export default CountDown;

这里的这部分<Typography variant="h2">COUNTDOWN</Typography>让网格无缘无故的展开，

这是没有它的样子：https ://prnt.sc/1cdu5mt

这是我把它放回去的时候：https ://prnt.sc/1cdui8a

标签： javascriptreactjsmaterial-ui