CODEWITHSUNDEEP
javascriptreactjsmaterial-uidom-events
Sergei
Sergei

Reputation: 41

Material UI in React: make <Paper> Component clickable

I want to make a Paper component clickeable. How can I achieve this? I tried setting an id property in the tag like () and then using the DOM to add an event listener but it does not work. I'm stuck and out of ideas on how to add a click to the Paper component. Please note that Paper is a div so I don't get why I can't add a click event. Thanks. My code:

<span>
      <Grid item xs={12} sm={12} md={6} lg={4} xl={4} spacing={5} key={something}>
        <Paper className={classes.paper} onClick={}>
             ....
        </Paper>
      </Grid>
</span>

Upvotes: 3

Views: 8210

Answers (3)

TorvaldsDB
TorvaldsDB

Reputation: 982

if you are using typescript, you'd better go through the document

Now, we get start:

import { Paper, styled } from "@mui/material";
import { Link } from "react-router-dom";

const ClickablePaper = styled(Paper)(({theme}) => ({
  ...your styles for the Paper
})) as typeof Paper;


<ClickablePaper conponent={Link} to='/path' onClick={() => console.log('clicked')}>
  ...Paper's children
</ClickablePaper>

Things that need to be noticed:

  1. ...as typeof Paper can not be overlooked, otherwise, type error will happen.
  2. you can also add styles use SX props
<ClickablePaper conponent={Link} to='/path' sx={{...your styles}} onClick={() => console.log('clicked')>
  ...Paper's children
</ClickablePaper>

Hope it helps you.

Upvotes: 0

Ramon Dias
Ramon Dias

Reputation: 1127

As @TigranPetrosyan said, they're not intended to be displayed like buttons, but you can use Card components which look similar to Paper, but can be clickable.

<span>
  <Grid item xs={12} sm={12} md={6} lg={4} xl={4} spacing={5} key={something}>
    <Card sx={{ maxWidth: 345 }}>
      <CardActionArea>
        <CardContent onClick={() => console.log('Clicked!')}>
          <Typography gutterBottom variant="h5" component="div">
            Lizard
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Lizards are a widespread group of squamate reptiles, with over 6,000
            species, ranging across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  </Grid>
</span>

Example taken from the V5 docs, I just added the onClick event listener.

Edit hardcore-panini-txq3bq

Upvotes: 1

Sebin
Sebin

Reputation: 74

Try wrapping the paper component using IconButton:

<span>
    <Grid item xs={12} sm={12} md={6} lg={4} xl={4} spacing={5} key={something}>
        <IconButton>
            <Paper className={classes.paper} onClick={}>
                 ....
            </Paper>
        </IconButton>
    </Grid>
</span>

Upvotes: 1

Related Questions