样式化组件 - 内联样式与媒体查询样式重叠

Question

我是样式化组件的新手。我正在尝试更改媒体查询中的 flexDirection，但我的内联样式 row 似乎与媒体查询样式重叠。

代码Link：https://codesandbox.io/s/hungry-minsky-npubu

我希望 flexDirection 在宽度 <600px 时更改为 column，默认方向应为 row。 我不能删除行属性，这是要求

我不知道如何处理这个问题。谁能帮我解决这个问题？

谢谢

Answer 1

    flex-direction: column !important;

Answer 2

使用以下内容修改您的媒体查询

  @media (max-width: 600px) {
    color: red;
    flex-direction: column !important;
  }