Question

我在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>
    );
};

但是，导航链接处于活动状态时，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);

如何在JS和React Router中使用CSS设置活动链接子元素的样式？

1 个答案: