Question

开发环境
反应
打字稿
next.js
样式化组件

MediaQuery不适用。

我想通过在样式化组件中描述mediaquery来调整小于450px的MediaGridItem。从开发人员工具的角度来看，className是MediaGridItem的className，但是grid-auto-flow：row;未应用。

如果您理解的话，我想请教一位教授。

import React, { FunctionComponent } from "react";
import styled from "styled-components";

const Item = styled.div<{ theme: any }>`
  display: inline-block;
  grid-column: ${({ theme }) => theme.column};
  grid-row: ${({ theme }) => theme.row};
`;
type Props = {
  theme: any;
  className?: string;
};

export const GridItem: FunctionComponent<Props> = ({
  theme,
  children,
  className,
}) => {
  return (
    <Item theme={theme} className={className}>
      {children}
    </Item>
  );
};

Blockquote

import { GridItem } from "components/layouts/GridItem";
import React, { FunctionComponent } from "react";
import styled from "styled-components";

const Grid = styled.div`
  display: grid;
  height: 150px;
  grid-row-gap: 7px;
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
`;

const MediaGridItem = styled(GridItem)`
  @media (max-width: 450px) {
    grid-auto-flow: row;
  }
`;

type Props = {
  name: string;
  img: string;
};

export const UserHeader: FunctionComponent<Props> = ({
  name,
  img,
}) => {
  return (
    <Grid>
      <GridItem theme={{ column: "1/2", row: "1/12" }}>
      </GridItem>
      <GridItem theme={{ column: "2/5", row: "2/3" }}>
      </GridItem>
      <GridItem theme={{ column: "2/5", row: "3/4" }}>
      </GridItem>
      <MediaGridItem theme={{ column: "6/10", row: "7/9" }}>
          {name}
      </MediaGridItem>
      <MediaGridItem theme={{ column: "10/11", row: "7/9" }}>
        <img src="images/test.svg" />
      </MediaGridItem>
    </Grid>
  );
};

Answer 1

过去，我遇到过类似的问题，当我在chrome开发人员工具中切换到移动尺寸时，媒体查询无法正常工作。

对我有用的解决方案是确保我的HTML <meta>中有一个<head>标记，其内容为：<meta name="viewport" content="width=device-width />

如果您使用create-react-app初始化了React，那么它应该已经自动添加了，否则您必须自己添加它。

样式化组件如何使用MediaQuery

1 个答案: