Скрыть элемент Nav.Link при просмотре с мобильного телефона. (React Bootstrap, машинопись) - PullRequest
Новая
       7

Скрыть элемент Nav.Link при просмотре с мобильного телефона. (React Bootstrap, машинопись)

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

Я добавил навигационную панель в свой проект реагирования, используя реакцию Bootstrap. Есть ли способ скрыть один из Navlink при просмотре с мобильного устройства.? Для стилей я использую stylesComponents. 

const StyledLink = styled(Nav.Link)`
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  color: ${(props) => (props.active ? "green !important" : "inherit")};
`;

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

Возможно ли скрыть один из компонентов StyledLink , если экран маленький без медиазапроса?

ТИА

1 Ответ

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

Один из способов сделать это - установить display: none или display: block в зависимости от ширины устройства. 

const StyledLink = styled(Nav.Link)`
  display: none;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  color: ${(props) => (props.active ? "green !important" : "inherit")};

  @media (min-width: 576px) {
     display: block;
  }
`;
...