v3更新-2018年8月29日

在 Material UI的3.0.0版本中* 添加了一个特定的 CardActionArea 组件来专门解决这种情况。 *

仅当您坚持使用v1时，请使用以下解决方案。

您可能想要实现的是 卡片 顶部的
卡片动作
（请参阅规格）。

Web库的材料组件将其作为Card Component的第一个用法示例。

通过将MUI Card*组件与强大的ButtonBase组件组合在一起，可以轻松地重现该确切行为。
在CodeSandbox上 可以找到一个正在运行的示例
：https :
//codesandbox.io/s/q9wnzv7684。

相关代码是这样的：

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import ButtonBase from '@material-ui/core/ButtonBase';

const styles = {
  cardAction: {
    display: 'block',
    textAlign: 'initial'
  }
}

function MyCard(props) {
  return (
    <Card>
      <ButtonBase
          className={props.classes.cardAction}
          onClick={event => { ... }}
      >
        <CardMedia ... />
        <CardContent>...</CardContent>
      </ButtonBase>
    </Card>
  );
}

export default withStyles(styles)(MyCard)

我也 强烈建议 将CardActions组件放在ButtonBase。