javascript - How to make the whole Card component clickable in Material UI using React JS?

ID : 131328

viewed : 6

Tags : javascriptcssreactjsmaterial-designmaterial-uijavascript

Top 5 Answer for javascript - How to make the whole Card component clickable in Material UI using React JS?

vote vote

97

Update for v3 — 29 of August 2018

A specific CardActionArea component has been added to cover specifically this case in version 3.0.0 of Material UI.

Please use the following solution only if you are stuck with v1.

What you probably want to achieve is a Card Action (see specification) on the top part of the card.

The Material Components for Web library has this as its first usage example for the Card Component.

You can easily reproduce that exact behaviour by composing MUI Card* components with the mighty ButtonBase component. A running example can be found here on CodeSandbox: https://codesandbox.io/s/q9wnzv7684.

The relevant code is this:

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) 

Also I strongly suggest to keep the CardActions component outside of the ButtonBase.

vote vote

86

With Material UI 4.9.10, this works.

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

If you're using react router, this also works.

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

71

We can also use Link tag to make the whole Card component clickable and for navigation

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

63

You could add an onClick={clickFunction} to the containing div of the card that links to the same function as the button.

vote vote

51

Here is the solution that worked for us, thanks to https://stackoverflow.com/a/50444524/192092

import { Link as RouterLink } from 'react-router-dom' import Link from '@material-ui/core/Link'  <Link underline='none' component={RouterLink} to='/your-target-path'>   <Card>     <CardActionArea>       ...     </CardActionArea>   </Card> </Link> 

Top 3 video Explaining javascript - How to make the whole Card component clickable in Material UI using React JS?

Related QUESTION?