[Question]: How to disable active class / props in <SubNavLink> ?

[untimated]

Context

Reference : https://design-system-git-main-strapijs.vercel.app/?path=/docs/design-system-components-subnav--base Result : https://i.postimg.cc/rm4rFHds/Screenshot-from-2023-03-17-13-49-08.png

i've been meddling with admin panel customization for the past few days, and wonder why i can't seemed to disabled the active class of SubNavLink component ?

import pluginId from '../../pluginId';
import HomePage from '../HomePage';
import {
    SubNav,
    SubNavHeader,
    SubNavSection,
    SubNavSections,
    SubNavLink,
    SubNavLinkSection,
} from "@strapi/design-system"

const App: React.FC = () => {
    const loc = useLocation()
    console.log(loc.pathname);
    return (
        <div>
            <SubNav ariaLabel="Sub Menu">
                <SubNavHeader label="Content Manager" />
                <SubNavSections>
                    <SubNavSection label="Master Data">

                        {masterDataList.map((m, index) => (
                            <SubNavLink
                                key={"master-${index}"}
                                to={loc}
                                isSubSectionChild
                                active={undefined}
                                >
                                {m.name}
                                {
                                // m.active ? "true" : "false"
                                }
                            </SubNavLink>
                        ))
                        }
                    </SubNavSection>
                </SubNavSections>
            </SubNav>
            <Switch>
                <Route path={"/plugins/${pluginId}"} component={HomePage} exact />
                <Route component={NotFound} />
            </Switch>
        </div>
       );
};

const masterDataList = [
    {
        name: "Posts",
        url: "/plugin/posts",
        active: true,
    },
    {
        name: "Author",
        value: "author"
    },
]

export default App;

Proposal

No response

Reasons

No response

[joshuaellis]

The active styles are set by the class .active on the SubNavLink's main Wrapper component, you could wrap it in styled and overwrite it, i think that would work:

const MyLink = styled(SubNavLink)`
    .active {
        background-color: pink
    }
`

[untimated]

The active styles are set by the class .active on the SubNavLink's main Wrapper component, you could wrap it in styled and overwrite it, i think that would work:

const MyLink = styled(SubNavLink)`
  .active {
      background-color: pink
  }
`

ah right, i find no other way other than tweaking with overwriting class, is this deliberate by strapi design ?. btw, was your solution using styled-components ?

[joshuaellis]

No, no other way because it uses ReactRouterDom links underneath and that's how that component works. Yes I was using styled-components.