I am currently utilizing the Material UI framework to build a form, which includes a <Button> component nested inside a Grid.
My objective is to maintain the standard width and height of the button on md screens and above, while ensuring it occupies full width with some additional vertical padding on xs screens. Unfortunately, I'm struggling to achieve this. Any suggestions?
For the complete code, you can visit: 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>
);
}