如何在 React 材质 UI 卡“MuiCardContent-root:last-child”默认填充底部中删除填充底部？答案

【问题标题】：How can i remove padding bottom in React material UI Card "MuiCardContent-root:last-child" default padding bottom?如何在 React 材质 UI 卡“MuiCardContent-root:last-child”默认填充底部中删除填充底部？
【发布时间】：2019-11-21 06:21:39
【问题描述】：

这是我的代码

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

attached screenshot for your reference

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>
  );

【问题讨论】：

你能更新你的代码吗？没有什么像你的形象。
这是我的代码stackblitz.com/edit/react-me9rk9

标签： reactjs material-ui

【解决方案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)

【讨论】：

【解决方案2】：

在 CSS 下方添加。

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

【讨论】：

不适用于此 .MuiCardContent-root:last-child { padding-bottom : 0 !important; }