html - 如何在 React.js 中突出显示当前页面侧绘制栏选项卡

Question

这里我有一个侧边栏，我需要突出显示选定的选项卡

每当页面更改时，我都需要突出显示选项卡...

我怎样才能做到这一点..？

这是我的代码：

反应.js：

<Menu>
        {SideBarData.map((element, i) => {
          return (
            <NavIcon onClick={showSidebar} to={element.path} key={i}>
              {element.icon}
            </NavIcon>
          );
        })}
</Menu>

样式.js

import { Link as LinkS } from "react-router-dom";

const Menu = styled.div`
  background: ${BG_COLOR.PRIMARY_COLOR_WHITE};
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 56px;
  height: 100vh;
  margin-left: -8px;
  box-shadow: 5px 0 10px -5px #888;
  position: fixed;
`;

const NavIcon = styled(LinkS)`
  font-size: ${FONT_SIZE.TEXT_NORMAL};
  display: flex;
  justify-content: flex-start;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 100%;
  color: ${BG_COLOR.PRIMARY_COLOR_BLACK};
  text-decoration: none;
  border-bottom: 1px solid;
  border-bottom-color: ${BG_COLOR.PRIMARY_COLOR_BLACK};
  text-align: left;

  &:hover {
    background-color: ${BG_COLOR.PRIMARY_COLOR};
    border-left: 5px solid ${BG_COLOR.PRIMARY_COLOR_BLACK};
    cursor: pointer;
  }
`;

在这里，我使用 styled-components 进行样式设置

标签： htmlcssreactjsstyled-components

Answer 1

如果您的侧边栏用于更改路径，您可以从 ReactRouter NavLink尝试此功能，并使用activeClassName.