Why is my media tag not working with my styled ocmponent?

Question

I am trying to add a @media to a styled-component. Here is my Component:

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

The @media is never triggered. What am I doing wrong? How do we get @media tags to work with styled-components?

Answer 1

Your media query is wrong, as you would do for standard CSS you need to specify the min-width like:

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