title: Using Material-UI Box Component with the Drawer Compoment
body: <p>The <a href="https://material-ui.com/components/box/" rel="nofollow noreferrer">Material-UI Box component</a> allows us to reference other components as follows:</p>
  
  <pre><code>import Button from "@material-ui/core/Button";
  import Box from "@material-ui/core/Box";
  
  const NewButton = ({ children }) =&gt; (
    &lt;Box compoment={Button} px={3} py={1} color="white" bgcolor="primary.dark"&gt;
      {children}
    &lt;/Box&gt;
  )
  </code></pre>
  
  <p>This works just as I want it to.  However, let me now try it with the Drawer component:</p>
  
  <pre><code>import Drawer from "@material-ui/core/Drawer";
  import Box from "@material-ui/core/Box";
  
  const NewDrawer = ({ children, open }) =&gt; {
    return (
      &lt;Box component={Drawer} width="300px" bgcolor="secondary.dark"&gt;
        {children}
      &lt;/Box&gt;
    )
  }
  </code></pre>
  
  <p>This does <strong>not</strong> work.  </p>
  
  <p>Any idea why not and how I can get it to work?</p>
  
  <p>Thanks.</p>