Как стилизовать дочерние элементы активной ссылки с помощью CSS в JS и React Router?

Question

Я использую React ROuter и CSS в JS для стиля. Я хотел бы изменить цвет фона и цвет границы для активных ссылок дочерних элементов div (navIndicator и 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>
    );
};

Однако цвета navIndicator и innerIndicator не меняются, когда активна навигационная ссылка. Хотите знать, как заставить стиль работать для активной ссылки?

Answer 1

NavLink элемент не указывает своим дочерним элементам, активен ли он. Так что я могу предложить получить текущий маршрут из BrowserRouter компонент (ваш компонент должен быть дочерним BrowserRouter так NavLink работает), сравните путь и установите локальный isActive переменная, чтобы указать, активен ли конкретный маршрут.

Например (не проверено, просто образец):

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);