时间戳

首页 > 解决方案 > React：需要为 React Project 中的下拉元素设置媒体查询，但不确定如何使用样式化组件进行设置

css - React：需要为 React Project 中的下拉元素设置媒体查询，但不确定如何使用样式化组件进行设置

问题描述

我有两个下拉菜单需要做出响应，以便它们移动到居中位置，而不是在屏幕尺寸小于 1024 像素时离开页面。我也不确定如何使用样式化组件来解决这个问题。我在代码中包含了 Stack Blitz：https ://stackblitz.com/edit/react-t35k77?file=Offers.js

标签： cssreactjsmedia-queriesstyled-components

解决方案

有多种方法可以实现这一点。CSS 媒体查询似乎是最简单的。

https://www.styled-components.com/docs/advanced#media-templates

尝试这样的事情让自己开始：

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%;
`

推荐阅读