v3更新-2018年8月29日
在 Material UI的3.0.0版本中* 添加了一个特定的 CardActionArea 组件来专门解决这种情况。 *
仅当您坚持使用v1时,请使用以下解决方案。
您可能想要实现的是 卡片 顶部的
卡片动作
(请参阅规格)。
Web库的材料组件将其作为Card Component的第一个用法示例。
通过将MUI
Card*组件与强大的
Buttonbase组件组合在一起,可以轻松地重现该确切行为。
在CodeSandbox上 可以找到一个正在运行的示例
:https :
//presandbox.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。



