如何在样式组件中实现媒体查询？

Question

我有一个应该有媒体查询的反应组件：

const CalloutsContainer = styled.div`
@media (min-width: 900px) {
    display: flex;
    justify-content: space-between;
}
`;

组件的开头如下所示：

<CalloutsContainer>
        <Container>
          <CallOut>
            <h4>Feature 1</h4>
            <p>
            ...

不幸的是我无法让它工作：列显示在行而不是列中。我怎样才能让媒体查询工作？ codesandbox

Answer 1

您应该将样式应用于 Container（而不是 CalloutContainer）或将其删除。请注意，CalloutContainer 有一个 child，因此您的 flex 修改不会产生影响。

或者，您可以进一步嵌套您的规则：

@media (...) {
  > * {
    display: flex;
  }
}

How to implement a mediaquery inside styledcomponents?