Material UI 中的排版和媒体查询

Question

在下面的排版组件中，我想根据不同的屏幕宽度使 variant prop 动态化，如何实现？感谢您的反馈

import { useTheme, useMediaQuery } from "@material-ui/core";

const Home = () => {
  const classes = useStyles();
  const theme = useTheme();
  const MQlg = useMediaQuery(theme.breakpoints.down("lg"));
  const MQmd = useMediaQuery(theme.breakpoints.down("md"));
  const MQsm = useMediaQuery(theme.breakpoints.down("sm"));

<Typography
          variant={`${MQsm && "h4"}   ${MQmd && "h3"}  $ {MQlg && "h2"} `}
          className={classes.text}
          gutterBottom
        >
          pioneering
</Typography>

Answer 1

按照此 MUI page 上的示例进行 useMediaQuery，请查看我为帮助您而创建的内容：

import * as React from "react";
import { createTheme, ThemeProvider, useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import { Typography } from "@material-ui/core";
function MyComponent() {
  const theme = useTheme();
  const large = useMediaQuery(theme.breakpoints.up("lg"));
  const medium = useMediaQuery(theme.breakpoints.up("md"));
  const small = useMediaQuery(theme.breakpoints.up("sm"));

  return (
    <>
      <div>{`large: ${large}`}</div>
      <div>{`medium: ${medium}`}</div>
      <div>{`small: ${small}`}</div>
      <Typography
        variant={large ? "h1" : medium ? "h2" : small ? "h3" : "body1"}
      >
        Font Size Change
      </Typography>
    </>
  );
}

const theme = createTheme();

export default function ThemeHelper() {
  return (
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  );
}

检查页面，并更改屏幕尺寸。有些看起来是真的，而有些是假的。

Material UI 中的排版和媒体查询

Material UI Typography & Media Queries in

javascript

media-queries

reactjs

material-ui