How to style the active link childs using CSS in JS and React Router?

Question

I am using React ROuter and CSS in JS for style. I'd like to change the background color and border color for the active links child divs (navIndicator and innerIndicator)

import { css, StyleSheet } from 'aphrodite/no-important';
export default ({ task, selectedLocal, selectedScenarioId, taskId }: ITaskNavItem) => {
    const isActiveNav = (match: any, location: object) => match;

    const theme = getTheme();
    const styles = StyleSheet.create({
        navLink: {
            display: 'flex',
            fontSize: '12px',
            textDecoration: 'none',
            color: theme.palette.neutralPrimary
        },
        navLinkActive: {
            color: theme.palette.neutralPrimary,
            fontWeight: 'bold',
            '.navIndicator': {
                borderColor: theme.palette.themePrimary
            },
            '.innerIndicator': {
                backgroundColor: theme.palette.themePrimary
            }
        },
        navTitle: {
            width: '100px',
            textAlign: 'center',
            wordBreak: 'break-word',
            wordSpacing: '100px'
        },
        linkText: {
            display: 'flex',
            flexFlow: 'column',
            'align-items': 'center'
        },
        navIndicator: {
            borderRadius: '50%',
            margin: '10px 0 0 0',
            backgroundColor: theme.palette.white,
            width: '30px',
            height: '30px',
            border: '2px solid',
            borderColor: theme.palette.neutralPrimary,
            position: 'relative'
        },
        innerIndicator: {
            position: 'absolute',
            borderRadius: '50%',
            width: '20px',
            height: '20px',
            backgroundColor: theme.palette.neutralPrimary,
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)'
        }
    });

    return (
        <div className={css(styles.navLink)}>
            <NavLink
                exact
                isActive={isActiveNav}
                className={css(styles.navLink)}
                activeClassName={css(styles.navLinkActive)}
                to={`/selectedLocal/${selectedLocal}/scenarios/${selectedScenarioId}/tasks/${taskId}`}
            >
                <div className={css(styles.linkText)}>
                    <div className={css(styles.navTitle)}> {task.title}</div>
                    <div className={css(styles.navIndicator)}>
                        <div className={css(styles.innerIndicator)} />
                    </div>
                </div>
            </NavLink>
        </div>
    );
};

However, the navIndicator and innerIndicator colors doesn't change when nav link is active. Wondering how to get the style working for active link?

Answer 1

NavLink element does not indicate to its children if it active. So I may suggest to get currecnt route from BrowserRouter component (your component should be child of BrowserRouter so NavLink works), compare path and set local isActive variable to indicate if specific route is active.

For example (not tested, just sample):

const StyledLinks: React.FunctionComponent<RouteComponentProps & ITaskNavItem> = ({ task, selectedLocal, selectedScenarioId, taskId, location }) => {
    const to = '/selectedLocal/${selectedLocal}/scenarios/${selectedScenarioId}/tasks/${taskId}';
    const isActive = to === location.pathname;
    const styles = StyleSheet.create({
    // ...
        navIndicatorActive: {
            borderColor: theme.palette.themePrimary
        },
    // ...

    return (
        <div className={css(styles.navLink)}>
            <NavLink
                exact

                className={css(styles.navLink)}
                activeClassName={css(styles.navLinkActive)}
                to={to}
            >
                <div className={css(styles.linkText)}>
                    <div className={css(styles.navTitle)}> {task.title}</div>
                    <div className={isActive ? css([styles.navIndicator, styles.navIndicatorActive]) : css(styles.navIndicator)}>
                        <div className={css(styles.innerIndicator)} />
                    </div>
                </div>
            </NavLink>
        </div>
    );
}

// Wrap your component withRouter to get location prop
export default withRouter(StyledLinks);