我有两个下拉菜单需要做出响应,以便它们移动到居中位置而不是在屏幕尺寸小于 1024 像素时跑出页面。我也不确定如何使用样式化组件来解决这个问题。我在代码中加入了 Stack Blitz:https://stackblitz.com/edit/react-t35k77?file=Offers.js
最佳答案
有多种方法可以实现这一点。 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%;
`
关于css - React : Need to set media queries for dropdown elements in React Project, 但不确定如何使用样式化组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56191911/