I am using Material UI and I'm creating a form, I have a <Button> component inside that form Grid.
I want the button to take its regular width and height on md screens and above, but want to have it full width and a bit of extra padding-y on xs screens. But I'm not able to figure out how?
Full code: or view in 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>
);
}
I was able to solve this by using the useMediaQuery[1] MUI hook as follows:
Full code: (sorry for not providing a code sandbox, but useMediaQuery doesn't work with the code sandbox for some reason)
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>
);
}
I don't know why all that was actually required, we should have some syntax as follows:
// this is not real, but just an example
<Button fullWidth={(theme) => theme.breakpoints.is("sm")} variant="contained">
anyways.