时间戳

首页 > 解决方案 > 使用 Nextjs 应用程序中的样式组件更改活动引导导航链接的颜色。（打字稿）

css - 使用 Nextjs 应用程序中的样式组件更改活动引导导航链接的颜色。（打字稿）

问题描述

我在我的 react typescript 应用程序中使用 react-bootstrap 和样式化的组件。我想更改活动导航链接的颜色。

代码：

const StyledNav = styled(Nav)`
  font-size: 12px;
  text-transform: uppercase;
`;

  <StyledNav>
     <StyledNav.Link>BACK </StyledNav.Link>
     <StyledNav.Link>HOME </StyledNav.Link>
     <StyledNav.Link active>{props.page}</StyledNav.Link>
  </StyledNav>

TIA

标签： cssreactjstypescriptnext.jsstyled-components

解决方案

您可以在模板文字中使用道具。

const StyledLink = styled(Nav.Link)`
  font-size: 12px;
  text-transform: uppercase;
  color: ${props => props.active ? 'red': 'inherit'};
`;

如果你想有多个定义，你可以像这样使用它；

const StyledLink = styled(Nav.Link)`
  font-size: 12px;
  text-transform: uppercase;
  ${props => props.active && `
    color: red;
    border-bottom: 3px solid green;
  `}
`;

  <Nav>
     <StyledLink>BACK </StyledLink>
     <StyledLink>HOME </StyledLink>
     <StyledLink active>{props.page}</StyledLink>
  </Nav>

推荐阅读