React: необходимо установить медиазапросы для выпадающих элементов в React Project, но не знаете, как это сделать со стилизованными компонентами.

Question

У меня есть два раскрывающихся списка, которые мне нужно сделать адаптивными, чтобы они перемещались по центру, а не убегали со страницы всякий раз, когда размер экрана меньше 1024 пикселей.Я также не уверен, как это сделать, используя стилизованные компоненты.Я включил Stack Blitz здесь с моим кодом: https://stackblitz.com/edit/react-t35k77?file=Offers.js

Answer 1

Различные способы сделать это. CSS медиазапросы кажутся самыми простыми.

https://www.styled -components.com / документы / передовые # медиа-шаблоны

Попробуйте что-то вроде этого, чтобы начать:

const DropdownRow = styled.div`
  display: flex;

  @media (max-width: 1024px) {
    flex-direction: column;
    justify-content: center;
  }

    th:first-child {
    width: 25%;
  }

  flex: 1;
  align-items: stretch;
  padding: 20px 30px 20px 10px;
  width: 60%;
  margin-left: 42%;
`