从移动设备查看时隐藏Nav.Link元素。 （ReactBootstrap，TypeScript）

Question

我已经使用reactBootstrap在我的react项目中添加了一个导航栏。从移动设备查看时，有什么方法可以隐藏其中一个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组件之一？

TIA

Answer 1

一种方法是根据设备的宽度设置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;
  }
`;