Изменение цвета активной bootstrap навигационной ссылки с использованием стилизованного компонента в приложении Next js (машинопись) - PullRequest
Новая
       5

Изменение цвета активной bootstrap навигационной ссылки с использованием стилизованного компонента в приложении Next js (машинопись)

0 голосов
/ 20 апреля 2020

Я использую реагирующий 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

1 Ответ

2 голосов
/ 20 апреля 2020

Вы можете использовать реквизиты в своих литералах шаблона. 

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>
...