title: How can I make a component responsive in Material UI?
body: <p>I am relatively new to material UI and I have designed a text field of type search. I would like it to be responsive. But I am failing to render the textfield in screen sizes with width smaller than 423</p>
  <pre><code>&lt;Box
    sx={{ flexGrow: 1 }}
    m={5} pt={5}
    display=&quot;flex&quot;
    justifyContent=&quot;flex-end&quot;
    alignItems=&quot;flex-end&quot;
  &gt;
    &lt;Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2,lg:2}} columns={{ xs: 2, sm: 2, md: 12 ,lg: 22}} display=&quot;flex&quot;
  justifyContent=&quot;center&quot;
  alignItems=&quot;center&quot; marginLeft={8} marginRight={1} mt={4} width='100%'&gt;
      &lt;SearchIcon style={{ coSelf: &quot;center&quot;, margin: &quot;5px&quot; }} /&gt;
      &lt;TextField
        id=&quot;standard-search&quot;
        label=&quot;Search for a company...&quot;
        type=&quot;search&quot;
        variant=&quot;standard&quot;
        textAlign=&quot;center&quot;
        fullWidth
  
      /&gt;
    &lt;/Grid&gt;
    &lt;Button onClick={() =&gt; setLight((prev) =&gt; !prev)} variant=&quot;contained&quot; color=&quot;primary&quot; sx={{ height: 40 }}&gt;
      &lt;SettingsIcon/&gt;
    &lt;/Button&gt;
  &lt;/Box&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/E796X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E796X.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/iN7sG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iN7sG.png" alt="enter image description here" /></a></p>
  <p>Any help is appreciated.</p>