我如何在样式化组件内部声明媒体查询作为要分配给样式的对象?

问题描述 投票:0回答:1

我有一个带样式组件设计的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}
        />

如何正确声明媒体查询,使其正常工作?

css reactjs styled-components
1个回答
0
投票
您可以使用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>

通过这种方式,您可以创建布局,并且它们可在整个应用程序中使用
© www.soinside.com 2019 - 2024. All rights reserved.