我有一个带样式组件设计的styles.jsx文件。我这样声明了一个const
const InputStyle = {
maxWidth: '600px',
marginBottom: '20px',
'@media(max-width: 740px)': {
width: '203px',
marginBottom: '14px',
backgroundColor: red,
},
};
maxWidth和marginBottom确实有效,但是当您转到媒体查询中指定的屏幕尺寸时,则不会进行任何更改。
而且我以这种方式在屏幕上使用它:
<Input
level="first"
type="text"
name="fullName"
style={InputStyle}
value={formFields.fullName.value}
onChange={handleInputChange}
/>
如何正确声明媒体查询,使其正常工作?
styled-media-queries
pkg,如下所示:import styled from "styled-components"; // You need this as well
import media from "styled-media-query";
const Box = styled.div`
background: black;
${media.lessThan("medium")`
/* screen width is less than 768px (medium) */
background: red;
`}
${media.between("medium", "large")`
/* screen width is between 768px (medium) and 1170px (large) */
background: green;
`}
${media.greaterThan("large")`
/* screen width is greater than 1170px (large) */
background: blue;
`}
`;
文档可用here如果您想使用媒体查询来创建更复杂的视图,则可以创建类似组件
<DesktopSize /> <TabletSize /> <MobileSize/> <WhateverSize />
并将它们导出到自己的模块中,然后将其导入所需的组件
<TabletSize> <Header /> <Slider /> <OtherComponent /> </TabletSize>
通过这种方式,您可以创建布局,并且它们可在整个应用程序中使用