React 中网格、样式组件和排版的移动响应能力？

问题描述

我的任务是采用我使用 Grid 构建的大屏幕布局并使其具有响应性。我们使用 Styled-components 和 Typography 进行样式设置。我对移动响应比较陌生，过去曾使用过媒体查询。所以它必须从这个开始：

为此：

基本上是一个“压缩”的版本，所有东西都按比例变小。我试图分别处理每个元素，以使其每个主题屏幕尺寸更小，但似乎非常乏味和不必要，甚至无法正常工作（我无法访问此页面上的价格输入）。这是组件：

/* eslint-disable react/no-array-index-key */
import React,{ useState,useContext } from 'react';
import styled from 'styled-components';
import currencyFormatter from 'utils/helpers/currencyFormatter';
import { localDate } from 'utils/formatDate';
import Button from 'components/Button';
import { func,string,array,obj,any } from 'prop-types';
import Typography from 'components/Typography';
import { ConfigContext } from 'containers/context/ConfigContext';
import TitleSection from './PlanConcertComponents/TitleSection';
import TitleWrapper from './PlanConcertComponents/TitleWrapper';
import TicketPriceInput from './PlanConcertComponents/TicketPriceInput';

const TicketPricingGrid = styled.div`
  display: grid;
  width: 100%;
  grid-template-columns: 20% 40% 40%;
  grid-template-rows: auto;
  justify-content: flex-start;
  align-items: center;
  padding-top: 120px;
  z-index: 1;

  @media (min-width: ${({ theme }) => theme.query.sm}) {
    // what to do here?
  }

  .in-state {
    padding-left: 100px;
  }

  .out-price {
    padding-bottom: 20px;
    padding-right: 50px;
    font-size: 40px;
  }

  // div:nth-child(1) {
  //   font-size: 0.8rem;
  // }

  @media (max-width: ${({ theme }) => theme.query.sm}) {
    max-width: auto;
    background: blue;
    font-size: 0.5rem;
  }
`;

const FootNote = styled.div`
  margin-top: 35px;
`;

const discountSection = styled.div`
  background: #ffffff;
  padding: 29px;
  display: flex;
  justify-content: center;
`;

const SetTicketPrice = ({
  onNext,checkmarkIcon,setPrices,prices,selectedCity,}) => {
  const { configFromApi } = useContext(ConfigContext);
  const formatter = currencyFormatter();
  const [isPriceChanged,setIsPriceChanged] = useState(false);

  const outLocationPrice = price => {
    if (price === undefined || Number(price) <= 1) {
      return '$--.00';
    }
    const formattedPrice = formatter(
      Number(price) * configFromApi.CONCERT_TICKET_OUTSIDE_CITY_PRICE_INDEX,);
    return formattedPrice;
  };

  const detectInputChange = e => {
    if (e.target.value !== '') {
      return setIsPriceChanged(true);
    }
    return setIsPriceChanged(false);
  };

  return (
    <>
      <TitleWrapper>
        <TitleSection title="set ticket price" />
        {prices.length === [...selectedCity].length ? (
          <Button
            onClick={() => onNext()}
            width={171}
            height={46}
            marginBottom={10}
            marginTop={10}
            className="concert-step-btn"
          >
            <span>PREVIEW</span>
            <img src={checkmarkIcon} alt="" height={10} />
          </Button>
        ) : (
          <Button
            width={171}
            height={46}
            marginBottom={10}
            marginTop={10}
            disabled
            className="concert-step-btn"
          >
            PREVIEW
          </Button>
        )}
      </TitleWrapper>

      <discountSection>
        <Typography h3 black>
          To help your tickets sell quickly the first 20 ticket buyers will get
          a 50% discount. Be sure to let your fans kNow!
        </Typography>
      </discountSection>
      <FootNote>
        <Typography medium spaced className="hide-mobile">
          *After the first 20 tickets anyone located in-state can purchase
          tickets at the regular ticket price you set.
        </Typography>
      </FootNote>
      <TicketPricingGrid>
        <div />
        <div>
          <Typography className="in-state" h3>
            IN-STATE
          </Typography>
        </div>
        <div>
          <Typography className="out-state" h3>
            OUT-OF-STATE
          </Typography>
        </div>

        {[...selectedCity].map((city,idx) => (
          <>
            <div>
              <Typography h4>
                {city.name} {city.address}
              </Typography>

              <Typography h4>
                {localDate(city.dateTime,'MMM DD - h p')}
              </Typography>
            </div>
            <div>
              <TicketPriceInput
                onChange={e => {
                  setPrices(e.target.value,idx);
                  detectInputChange(e);
                }}
                value={prices.length === 0 ? '0' : prices[idx]}
                name="price"
                isPriceChanged={isPriceChanged}
                className="ticket-price-input"
              />
            </div>
            <div>
              <Typography h2 bold className="out-price">
                {outLocationPrice(prices[idx])}
              </Typography>
            </div>
          </>
        ))}
      </TicketPricingGrid>
    </>
  );
};

SetTicketPrice.propTypes = {
  onNext: func,checkmarkIcon: string,setPrices: func,prices: array,selectedCity: obj,};

export default SetTicketPrice;

此外，我以前从未使用过排版。我假设排版元素应该自动响应是否正确？如果是这样，它似乎不起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）