CODEWITHSUNDEEP
reactjsreact-bootstrapreact-router-bootstrap
BRogers
BRogers

Reputation: 3594

Remove Active Class from LinkContainer

In my react app I have buttons for logging in and out. Logging out isn't a big deal because it's never made active. When using LinkContainer (which is great) it will add an active class of active when that route is selected. This is great for everything except buttons. When it adds the `active class to my button it adds a padded background color behind the button. I don't want that. Heres the code and image now:

Active class on button

And here's the code:

import { Glyphicon, Nav, NavItem, Button } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

<Nav>
    <LinkContainer to={'/'} exact>
        <NavItem>
            <Glyphicon glyph='home' /> Home
        </NavItem>
    </LinkContainer>
    <LinkContainer to={'/documents'}>
        <NavItem>
            <Glyphicon glyph='education' /> User Documents
        </NavItem>
    </LinkContainer>
    <LinkContainer to={'/login'}>
        <NavItem>
            <Button bsStyle="primary" block>
                <span className='glyphicon glyphicon-log-in'></span>Login
            </Button>
        </NavItem>
    </LinkContainer>
</Nav>

I want it to set that active class on everything other than my buttons.

Using react-bootstrap and react-router-bootstrap

Upvotes: 0

Views: 1628

Answers (1)

BRogers
BRogers

Reputation: 3594

After looking through the code on react-router-bootstrap and a bunch of different articles and posts I figured it out.

I had to change:

<LinkContainer to={'/login'}>
    <NavItem>
        <Button bsStyle="primary" block>
            <span className='glyphicon glyphicon-log-in'></span>Login
        </Button>
    </NavItem>
</LinkContainer>

To:

    <LinkContainer to={'/login'} activeClassName="">
        <NavItem>
            <Button bsStyle="primary" block>
                <span className='glyphicon glyphicon-log-in'></span>Login
            </Button>
        </NavItem>
    </LinkContainer>

Making the activeClassName="" worked as it would make sure there was no active class being set.

Extremely helpful for buttons. I hope this saves people time. Here's what it looked like after for comparison:

LinkContainer button with no active class

Upvotes: 6

Related Questions