v3 更新 - 2018 年 8 月 29 日

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

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

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

Material Components for Web 库将此作为Card Component 的第一个使用示例。

通过将 MUICard*组件与强大的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.

使用 Material UI 4.9.10，这是有效的。

<Card>
    <CardActionArea href="https://google.com">
        <CardContent>
            <Typography>Click me!</Typography>
        </CardContent>
    </CardActionArea>
</Card>

如果您使用的是react-router，这也有效。

<Card>
    <CardActionArea component={RouterLink} to="/questions">
        <CardContent>
            <Typography>Click me!</Typography>
        </CardContent>
    </CardActionArea>
</Card>

我们还可以使用 Link 标签使整个 Card 组件可点击和导航

import { Link } from 'react-router-dom';
function myCard() {
  return (
    <Link to={'/give_your_path'}>
     <Card>
      <Card text="This is text"/>
     </Card>
    </Link>
  );
}

您可以onClick={clickFunction}向卡片的包含 div添加一个链接到与按钮相同的功能。