ReactJS: clickable text - how can I disable click outside the text area?

Question

I have a clickable text component with Material UI Typography:

            <MDBox mt={2} mb={1}>              
              <MDTypography variant="body2" style={{color: 'white', cursor:"pointer"}}
                onClick={()=>dispatch({type: "goBackToPage1"})}
              >
                Go back to previous page
              </MDTypography>
            </MDBox>

As you can see, the Typography takes up the entire row area, such that even if I put the mouse on the green area (on the same row but outside the text area), the mouse still turns into a pointer and you can still click it.

How do I restrict clicking to be strictly on the text, instead the whole row area?

Answer 1

You can try to pass "component" prop to MUI Typography and and set it as span

<Typography component="span">
  ...
</Typography>