a continuación, en el componente de tipografía, quería hacer que la variante de apoyo fuera dinámica de acuerdo con los diferentes anchos de pantalla, ¿cómo se puede hacer? Agradecemos sus comentarios
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>Siguiendo el ejemplo en esta página de MUI para useMediaQuery, vea lo que he creado para ayudarlo:
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> ); }Inspeccione la página y cambie los tamaños de la pantalla. Algunas parecerán verdaderas, mientras que otras serán falsas.