Как удалить нижнюю часть отступа в карточке пользовательского интерфейса материала React "MuiCardContent-root: last-child" по умолчанию для нижней части отступа?

Question

Вот мой код

https://stackblitz.com/edit/react-me9rk9

прикрепленный скриншот для справки

return (
    <Card className={classes.card} >
      <CardContent>
        <Grid container justify="space-between">

          <Grid item container spacing={0}  alignItems="center" justify="left">
            <Grid container direction="row"  alignItems="flex-start">

              <AssessmentOutline  color="primary"  className={classes.largeIcon} />

            <Grid >
            <Typography color="textPrimary" gutterBottom variant="h1">20</Typography>
            <Typography color="textPrimary" gutterBottom variant="h6">Assessment Due</Typography>
          </Grid>            
            </Grid>                  
      </Grid>
        </Grid>
      </CardContent>
    </Card>
  );

Answer 1

import { withStyles } from "@material-ui/core";
const styles = (theme) => ({
    removeBottomPadding: {
        paddingBottom: "0px"
    }
});

class YourComponetName extends Component {
    render(){
         const { classes } = this.props;
         return (
            <MaterialComponent classes={{ root: classes.removeBottomPadding}}>
                 // your code 
            </MaterialComponent >
        )
    }

}
export default withStyles(styles, { withTheme: true })(YourComponentName)

Answer 2

Добавить ниже CSS.

.MuiCardContent-root:last-child {
   padding-bottom : 0 !important;
}