Estoy usando Material UI y estoy creando un formulario, tengo un componente < Button > dentro de ese formulario Grid .
Quiero que el botón tome su ancho y alto normales en las pantallas md y superiores, pero quiero tener el ancho completo y un poco de relleno adicional en las pantallas xs . Pero no soy capaz de averiguar cómo?
Código completo:o ver en codesandbox
import "./styles.css"; import Grid from "@mui/material/Grid"; import Button from "@mui/material/Button"; export default function App() { return ( <Grid container spacing={2}> <Grid item xs={12}> <Button variant="contained">Submit</Button> </Grid> {/* <Grid item xs={12}> <Button fullWidth variant="contained"> Submit </Button> </Grid> */} </Grid> ); }Pude resolver esto usando el useMediaQuery[1] MUI de la siguiente manera:
Código completo: ( perdón por no proporcionar un código sandbox , pero useMediaQuery no funciona con el código sandbox por algún motivo )
import "./styles.css"; import Grid from "@mui/material/Grid"; import Button from "@mui/material/Button"; import useMediaQuery from "@mui/material/useMediaQuery"; export default function App() { const isFullWidth = useMediaQuery((theme) => theme.breakpoints.only("sm")); return ( <Grid container spacing={2}> <Grid item xs={12}> <Button fullWidth={isFullWidth} variant="contained"> Submit </Button> </Grid> </Grid> ); }No sé por qué se requería todo eso, deberíamos tener una sintaxis como la siguiente:
// this is not real, but just an example <Button fullWidth={(theme) => theme.breakpoints.is("sm")} variant="contained">de todos modos.