materialUI CardContent CSS

Question

我想删除元素之间的空间（图像中用红色正方形标记）：

这是我的card.js：

<Card className={classes.card} style={{ backgroundColor: i % 2 ? '#f0f0f0' : '#ffffff' }} key={i} onClick={() => handleExpandClick(i)} >
                    <CardContent className={classes.cardcontent}   >

                        <div style={{ overflow: "hidden",padding:0}}>
                        <p  style={{ float: "right", userSelect:'non' }}>{car.NICKNAME}</p>
                        <p style={{ float: "left", userSelect:'non' }}>{car.SENTDATE}</p>
                        </div>
                        <div style={{ overflow: "hidden", }}>
                        <p style={{ float: "right", textAlign: "right" }}>
                            {car.POSDESCRIPTION}
                        </p>
                        <CardActions disableSpacing style={{ float: "left" }}>
                            <IconButton
                                className={clsx(classes.expand, {
                                    [classes.expandOpen]: expandedId === i
                                })}
                                aria-expanded={expandedId === i}
                                aria-label="show more"
                            >
                                <ArrowDropDownCircleTwoToneIcon />
                            </IconButton>
                        </CardActions>
                        </div>
                        <div style={{ overflow: "hidden" }}>
                        <p style={{ float: "right" }}>({car.SPEED}km/h){car.TRUCKSTATE}</p>
                        <p style={{ float: "left" }}>{car.TEMPERATURE ? car.TEMPERATURE + '°c' : ''}</p>
                        </div>
                    </CardContent>
                    <Collapse in={expandedId === i} timeout="auto" unmountOnExit>
                        <CardContent style={{ textAlign: "right", backgroundColor: '#5687ab' }}>
                            <Link style={{ textDecoration: 'none' }} onClick={() => setMyHardwareId(car)} to={{ pathname: '/MapsPage', LatLong: [{ YPOINT: car.YPOINT, XPOINT: car.XPOINT }] }} ><div style={{ borderWidth: '2px', }}><img className={classes.iconImage} src={mapLogo} />نمایش روی نقشه</div></Link>
                            <hr />
                            <Link style={{ textDecoration: 'none' }} onClick={() => setMyHardwareId(car)} to={{ pathname: '/ReportsPage', carprops: car }} ><div style={{ borderWidth: '2px', }}><img className={classes.iconImage} src={reportogo} />گزارش ها</div></Link>
                            <hr />
                            <Link style={{ textDecoration: 'none' }} onClick={() => setMyHardwareId(car)} to={{ pathname: '/InfoPage', carprops: car }} ><div style={{ borderWidth: '2px', }}><img className={classes.iconImage} src={infoLogo} />اطلاعات ناوگان</div></Link>
                        </CardContent>
                    </Collapse>
                </Card>

这是样式，使用此样式，我可以删除main的填充，但不能删除元素之间的paddin

const useStyles = makeStyles(theme => ({
    card: {
        textAlign: 'center',
        alignItems: 'center',
        margin: 10,
    },
    cardcontent: {
        height: 140,
        padding:'0px',
        paddingRight:'16px',
        paddingLeft:'16px',
        cardcontent: {
            "&:last-child": {
              padding: '0px',

            }
          }
    }
}));

我们如何删除该空间？ 还有一个问题，如何删除页边距或填充第一格？