React js Material ui Typography

Question

I have a typography that when I hover I would like the cursor to appear like a button, and how would I be able to add my browser router routing to this click?

    <Grid  item lg={12} md={12} sm={12} xs={12} >   
    <Typography noWrap className={classes.labelForgot} variant="subtitle2">
    Forgot password
      </Typography>
      </Grid>

my route app:

<BrowserRouter>
    <div>
    <Header/>
    <Navigation/>
    <Container maxWidth="lg" >
      <Switch>
        <Route path="/" component={LandingPage} exact={true} /> 
        <Route path="/xd" component={AuthPage} exact={true} /> 
        <Route component={NotFoundPage} />
      </Switch>
      </Container>
    </div> 
  </BrowserRouter>

Martin Kjellberg Martin Kjellberg · Accepted Answer · 2019-12-10T22:28:21

The best way is to add the CSS-style-property to your class. That would look like:

.labelForgot { cursor: pointer; }

Then to make it link to a URL you would need to use either useHistory() for stateless components or export withRouter() for a class. In that case you can access the history and push to it as history.push('/url'). (https://reacttraining.com/react-router/web/api/Hooks/usehistory)

If you use a class you export it as export default withRouter(MyClass) and then you can access the history from props this.props.history.push('/url')

Or you could use <Link /> from the react-router package instead and style these to look like your Typography

React js Material ui Typography

1 Answers