How can I style active Link ,if i have Grid material-ui

Question

I have Grids from material-ui, when you click on it, the link changes,when i want to change text color to black. Please tell me how to get a different text color if the link is active

I just don't want to use NavLink.Who had such a problem I know if you use NavLink then you can get a different color through activeStyle

export const gridLayoutChildCSS = css`
  && {
    height: 64px;
    width: 100%;
    &:hover {
      background-color: ${(props) => props.theme.colors.grey};
      transition: 0.1s ease-in-out;
    }
    cursor: pointer;
  }
`;

export const gridLayoutIconCSS = css`
  && {
    height: 26px;
  }
`;
export const gridLayoutChildTextCSS = css`
  && {
    font-family: Fira Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-align: left;
    color: ${(props) => props.theme.colors.wetAsphalt};
  }
`;


export const Sidebar: React.FC = () => {
  const [isLoading, setIsLoading] = useState(false);
  const handleRedirect = useHandleRedirect();

  const topItems = [
    { icon: <SvgCalendarIcon />, title: 'Пункт', url: NEW_PATHS.welcome.main },
    { icon: <SvgDocumentsIcon />, title: 'Список документов', url: '' },
    { icon: <SvgCalendarIcon />, title: 'График работы', url: '' },
    { icon: <SvgPeopleIcon />, title: 'Сотрудники', url: '' },
  ];
  const bottomItems = [
    { icon: <SvgQuestionIcon />, title: 'Помощь', url: '' },
    { icon: <SvgProfileIcon />, title: 'Профайл', url: '' },
    { icon: <SvgSettingsIcon />, title: 'Настройки', url: '' },
  ];

  return (
    <Styled.Root>
      {isLoading ? (
        <OldSidebar />
      ) : (
                {topItems.map((topItem) => {
                  return (
                    <Grid
                      css={gridLayoutChildCSS}
                      onClick={() => handleRedirect(topItem.url)}
                      container
                      direction="row"
                      justifyContent="center"
                      alignItems="center"
                    >
                      <Grid css={gridLayoutIconCSS} item xs={2}>
                        {topItem.icon}
                      </Grid>
                      <Grid item xs={7}>
                        <Typography css={gridLayoutChildTextCSS}>{topItem.title}</Typography>
                      </Grid>
                    </Grid>
                  );
                })}
      )}
    </Styled.Root>
  );
};

Answer 1

set [isactive,setIsactive] state and when clicked set isactive to true and change the classname when isactive is true