Styled Components - 内联样式与媒体查询样式重叠

Posted 2023-02-22

【中文标题】Styled Components - 内联样式与媒体查询样式重叠

【英文标题】：Styled Components - Inline styling overlaps the media query styles

【发布时间】：2021-05-30 04:36:09

【问题描述】：

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

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

我希望flexDirection 在宽度column，默认方向应为row。 我无法移除 row 道具，这是要求

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

谢谢

【问题讨论】：

可以加!important关键字

@Shuvo 感谢您的帮助，但有更合适的方法吗？

【参考方案1】：

    flex-direction: column !important;

【讨论】：

我猜这不是正确的方法。或者是吗？什么是正确的解决方案？

这是覆盖内联样式的唯一方法

【参考方案2】：

通过以下方式修改您的媒体查询

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