1

我在 JS 中使用 React ROuter 和 CSS 作为样式。我想更改活动链接子 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>
    );
};

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

4

1 回答 1

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);
于 2019-06-20T02:45:20.413 回答