Как я могу объявить медиазапросы внутри стилизованных компонентов как объект, который нужно назначить стилю?

Question

У меня есть файл styles.jsx со стилизованным дизайном компонентов. Я объявил const таким образом

const InputStyle = {
  maxWidth: '600px',
  marginBottom: '20px',
  '@media(max-width: 740px)': {
    width: '203px',
    marginBottom: '14px',
    backgroundColor: red,
  },
};

maxWidth и marginBottom работает, но когда вы go до размера экрана, указанного в медиа-запросе, никаких изменений не регистрируется.

И я использую это на экране следующим образом:

<Input
          level="first"
          type="text"
          name="fullName"
          style={InputStyle}
          value={formFields.fullName.value}
          onChange={handleInputChange}
        />

Как правильно объявить медиазапрос, чтобы он работал?

Answer 1

вы можете использовать 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;
  `}
`;

do c доступно здесь

, если вы хотите, чтобы более сложные виды создавались с В медиа-запросах вы можете создавать такие компоненты, как

<DesktopSize /> 
<TabletSize /> 
<MobileSize/>
<WhateverSize />

, экспортировать их в свои собственные модули и импортировать, используя любой компонент, который вам нужен

<TabletSize>
  <Header /> 
  <Slider /> 
  <OtherComponent /> 
</TabletSize>

. макеты, и они могут использоваться во всем приложении