I want to make a Paper ponent 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 ponent. 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>

I want to make a Paper ponent 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 ponent. 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>

• javascript
• reactjs
• material-ui
• dom-events

Share Improve this question Follow asked Jan 24, 2021 at 14:35 SergeiSergei 4111 silver badge33 bronze badges 2

• You can't. Paper can't be clicked. CHeck the docs on material ui. Also, why would you like to click on paper? Paper makes the background color different, just for styles. – Tigran Petrosyan Commented Jan 24, 2021 at 14:44
• @TigranPetrosyan I can think in a variety of examples, for instance the Google Docs interface, which has a button to start a new empty file. The button looks closer to the MUI Paper ponent. – Ramon Dias Commented Jan 3, 2023 at 0:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Try wrapping the paper ponent 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>

As @TigranPetrosyan said, they're not intended to be displayed like buttons, but you can use Card ponents 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" ponent="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.

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.