如何在 JS 和 React Router 中使用 CSS 设置活动 link 子项的样式？

Question

我在 JS 中使用 React ROuter 和 CSS 来实现样式。我想更改活动 links 子 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>
    );
};

但是，当导航 link 处于活动状态时，navIndicator 和 innerIndicator 颜色不会改变。想知道如何使样式适用于活动 link？

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

如何在 JS 和 React Router 中使用 CSS 设置活动 link 子项的样式？

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

reactjs

aphrodite

css-in-js