为什么我的媒体标签不能与我的样式组件一起使用？

Question

我正在尝试将 @media 添加到 styled-component。这是我的组件：

const Image = styled.img`
  display: none;
  @media(width >= 600px) {
    display: block;
  };
`;

永远不会触发@media。我究竟做错了什么？我们如何让 @media 标签与 styled-components 一起使用？

Answer 1

您的媒体查询是错误的，就像您对标准 CSS 所做的那样，您需要指定 min-width，例如：

@media (min-width: 600px) { 
   display: block;
}