React Router active class

[shut bear]

Hi there, I've went throu the polymorphic components documentation, implemented the component as such:

import classes from './NavBar.module.css';

function NavbarLink({ icon: Icon, label, href }: NavbarLinkProps) {
    return (
        <Tooltip label={label} position="right" transitionProps={{ duration: 0 }}>
            <UnstyledButton
                className={classes.link}
                renderRoot={({ className, ...others }) => (
                    <NavLink
                        to={href}
                        className={({ isActive }) =>
                            cx(className, { 'active': isActive })
                        }
                        {...others}
                    />
                )}>
                <Icon stroke={1.5} />
            </UnstyledButton>
        </Tooltip>
    );
}

It renders as such: <a type="button" aria-current="page" class="mantine-focus-auto _link_1o6c9_15 m-87cf2631 mantine-UnstyledButton-root active" href="/projects?tab=list">

Any Idea?

but the ".active" style doesn't apply correctly.

    width: rem(50px);
    height: rem(50px);
    border-radius: var(--mantine-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mantine-color-white);

    &:hover {
        background-color: var(--mantine-color-blue-7);
    }

    &.active {
        background-color: brown;
        &,
        &:hover {
            box-shadow: var(--mantine-shadow-sm);
            background-color: var(--mantine-color-white);
            color: var(--mantine-color-blue-6);
        }
    }
}```
the selector ._link_xxx.active doesn't match the element... 

this is my postcss config:
```module.exports = {
    plugins: {
        'postcss-preset-mantine': {},
        'postcss-simple-vars': {
            variables: {
                'mantine-breakpoint-xs': '36em',
                'mantine-breakpoint-sm': '48em',
                'mantine-breakpoint-md': '62em',
                'mantine-breakpoint-lg': '75em',
                'mantine-breakpoint-xl': '88em',
            },
        },
    },
};```

[shut bear]

OK, I've found the solution, it mismatches the documentation... function NavbarLink({ icon: Icon, label, href }: NavbarLinkProps) { return ( <Tooltip label={label} position="right" transitionProps={{ duration: 0 }}> <UnstyledButton className={classes.link} renderRoot={({ className, ...others }) => ( <NavLink to={href} className={({ isActive }) => cx(className, isActive && classes.active) } {...others} /> )}> <Icon stroke={1.5} /> </UnstyledButton> </Tooltip> ); }