Как реализовать медиазапрос внутри стилизованных компонентов?

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 есть единственный ребенок, поэтому ваши модификации flex не будут иметь значения.

В качестве альтернативы, вы можете дополнительно вложить свое правило:

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