Search code examples
htmlcssreactjsstyled-componentscss-in-js

Styled Components - Inline styling overlaps the media query styles

I am new to styled components. I am trying to change the flexDirection in media query but my inline styling row seems to overlap with media query styles.

Code Link: https://codesandbox.io/s/hungry-minsky-npubu

I want the flexDirection to change to column when width <600px and by default the direction should be row. I cannot remove the row prop, that's the requirement

I am not sure how to handle this issue. Can anyone please help me with this?

Thanks

Solution 
  •     flex-direction: column !important;