Tabs
являются ссылками, то тогда используйте внутри них компонент NavLink
из React Router, для этого компонента на active
можно указать свой класс, например, если используете styled-components:const Link = styled(NavLink)`
color: black;
&.active {
color: red;
}
`;
state
компонента выше и прокидывать пропс, например, activeTabName
дочерним компонентам и у каждой вкладки делать проверку, тогда пример будет выглядеть как-то так:const UserTabs = () => {
const [activeTabName, setActiveTabName] = userState('index');
return (
<Tabs>
<Tab
name={name}
tooltipText={tooltipText}
onTabClick={ (name) => setActiveTabName(name)}
/>
<Tab
name={name}
tooltipText={tooltipText}
onTabClick={ (name) => setActiveTabName(name)}
/>
</Tabs>
);
};