alisabzevari alisabzevari - 2 months ago 54
React JSX Question

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

Answer

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>