如何在样式化组件内部实现mediaquery？

Question

我有一个应具有mediaquery的reactcomponent：

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

组件的开始看起来像这样：

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

不幸的是，我无法使它工作：列显示为行而不是列。如何使mediaquery工作？ codesandbox

Answer 1

您应该将样式应用于Container（而不是CalloutContainer）或将其删除。请注意，CalloutContainer有一个孩子，因此您对flex的修改不会有任何改变。

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

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