CODEWITHSUNDEEP
reactjsreact-routermaterial-ui
alisabzevari
alisabzevari

Reputation: 8126

Render Link in material ui Drawer

I want to add my react-router links to Drawer. I tried this:

<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
   <Link to="/businesspartners">
      <MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
                rightIcon={<CommunicationBusiness />}
      >
         Business Partners
      </MenuItem>
   </Link>
</Drawer>

My problem is that the link will render underlined (like the image below).

enter image description here

Upvotes: 4

Views: 9984

Answers (3)

Mahesh More
Mahesh More

Reputation: 149

I have faced the same issue but maybe a new update in materialUI due to this is not working, There has some tweak as import from import Link from '@material-ui/core/Link';

so it will works

     import Link from '@material-ui/core/Link';

     <List>
      <ListItem button component={Link} href="/dsda">
        <ListItemIcon>
          <DashboardIcon />
        </ListItemIcon>
        <ListItemText primary="DashBoard"/>
      </ListItem>
     </List>

Upvotes: 0

Chris Owens
Chris Owens

Reputation: 5286

I had similar concerns with using styles directly and came across the following answer: https://stackoverflow.com/a/48252439/522859

To summarize, use the component attribute on the ListItem:

<List>
   <ListItem button component={Link} to="https://www.google.com">
        <ListItemText primary="Google" />
   </ListItem>
</List>

The official docs cover it here: https://material-ui.com/api/list-item/

Upvotes: 15

Shubham Khatri
Shubham Khatri

Reputation: 281606

Use inline style textDecoration: 'none' for the link. <Link> gets rendered as a standard <a> tag, which is why we can apply textDecoration rule there.

<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
   <Link to="/businesspartners" style={{ textDecoration: 'none' }}>
      <MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
                rightIcon={<CommunicationBusiness />}
      >
         Business Partners
      </MenuItem>
   </Link>
</Drawer>

Upvotes: 1

Related Questions