Full width button only on xs screens

Question

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>
  );
}

Answer 1

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.