title: MaterialUI Styled Box
body: <p>I am using Material UI 5. I want to create a custom box component so that I don't have to keep defining the same sx prop every time I make a box. I also want all the boxes to look the same. I read over the docs and it lead me to this.</p>
  <pre><code>const StyledBox = styled(Box)({
            type: 'paper',
            borderRadius: 8,
            m: 4,
            alignItems:&quot;center&quot;,
            justifyContent:&quot;center&quot;,
            padding: 4,
            boxShadow: 12,
            backgroundColor: 'primary.light',
            '&amp;.hover': {
              backgroundColor: 'primary',
              opacity: [0.9,0.8,0.7]
            }
            });
  </code></pre>
  <p>The issue is that when I try to use StyledBox it seemingly has no effect? When I manually create the box with sx prop it works fine. But when I wrap with StyledBox I am seeing no box at all. Can anyone point me in the right direction?</p>
  <pre><code>return (
  
            &lt;StyledBox&gt;
              &lt;Stack spacing={1} sx={{width: 300}}&gt;
              &lt;Typography variant='h3' component='h3'&gt;
                Modem Configuration   
              &lt;/Typography&gt;
              &lt;FormLabel&gt;Tx Power Enable&lt;/FormLabel&gt;
              &lt;RadioGroup
              row
              defaultValue=&quot;On&quot;&gt;
                  &lt;FormControlLabel value=&quot;On&quot; control={&lt;Radio /&gt;} label=&quot;On&quot; /&gt;
                  &lt;FormControlLabel value=&quot;Off&quot; control={&lt;Radio /&gt;} label=&quot;Off&quot; /&gt;
              &lt;/RadioGroup&gt;
              &lt;FormControl fullWidth&gt;
              &lt;FormLabel&gt;Tx AGC Power&lt;/FormLabel&gt;
              &lt;Select
                value={TxAgcPower}
                onChange={changeTxAgcPower}
              &gt;
                &lt;MenuItem value={2}&gt;2&lt;/MenuItem&gt;
                &lt;MenuItem value={3}&gt;3&lt;/MenuItem&gt;
                &lt;/Select&gt;
              &lt;FormLabel&gt;Tx AGC Enable&lt;/FormLabel&gt;
              &lt;RadioGroup
              row
              defaultValue=&quot;On&quot;&gt;
                  &lt;FormControlLabel value=&quot;On&quot; control={&lt;Radio /&gt;} label=&quot;On&quot; /&gt;
                  &lt;FormControlLabel value=&quot;Off&quot; control={&lt;Radio /&gt;} label=&quot;Off&quot; /&gt;
              &lt;/RadioGroup&gt;
              &lt;TextField id=&quot;filled-basic&quot; label=&quot;Modem Tx Gain&quot; variant=&quot;filled&quot; /&gt;
              &lt;TextField id=&quot;filled-basic&quot; label=&quot;Tx Frequency&quot; variant=&quot;filled&quot; /&gt;
              &lt;TextField id=&quot;filled-basic&quot; label=&quot;Rx Frequency&quot; variant=&quot;filled&quot; /&gt;
              &lt;/FormControl&gt;
              &lt;FormLabel&gt;Rx Gain Adjust&lt;/FormLabel&gt;
              &lt;Select
                value={RxGainAdj}
                onChange={changeRxGainAdj}
              &gt;
                &lt;MenuItem value={'low'}&gt;Low&lt;/MenuItem&gt;
                &lt;MenuItem value={'high'}&gt;High&lt;/MenuItem&gt;
                &lt;/Select&gt;
            &lt;Button variant=&quot;contained&quot;&gt;Apply&lt;/Button&gt;
            &lt;/Stack&gt;
          &lt;/StyledBox&gt;
        );
  }
  </code></pre>