title: Prevent layout shift with breakpoints
body: <p>I'm using material-ui v5, in case that matters.</p>
  <p>So I have a <code>Button</code> component, which should display in <code>fullWidth</code> when the user is viewing it in mobile.</p>
  <p>I have decided to use <code>useMediaQuery</code>. Something like:</p>
  <pre><code>const smDown = useMediaQuery(theme =&gt; theme.breakpoints.down(&quot;sm&quot;))
  return (
    &lt;Button fullWidth={smDown}&gt;
      Label
    &lt;/Button&gt;
  );
  </code></pre>
  <p>Yet, since I'm using React, which uses hydration. <code>useMediaQuery</code> will first return a <code>false</code> value before returning the correct value. And this causes a layout shift when viewing on mobile.</p>
  <p>Is there a better way to achieve what I'm looking for? Besides duplicating the component and dynamically hide one of them with <code>display: none</code>?</p>