title: Modify material-ui Paper boxShadow and background property
body: <p>I am following their documentation from <a href="https://mui.com/components/paper/" rel="nofollow noreferrer">Here</a> to modify default Paper component properties.</p>
  <p>Here is my code.</p>
  <pre><code>import { styled } from '@mui/material/styles';
  import { Modal, Button, TextField, Grid, Paper } from '@mui/material';
  
  const Item:any = styled(Paper)(({theme}) =&gt; ({
    // ...theme.typography.body2,
    root: {
      boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
    },
    padding: theme.spacing(1),
    textAlign: 'center',
    color: theme.palette.text.secondary,
    boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
    '&amp; .MuiPaper-root': {
      boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
    }
  }));
  const MyComponent = (props: any) =&gt; {
      return (
        &lt;Grid container&gt;
          &lt;Grid item xs={8}&gt;
              &lt;Item elevation={1} square variant=&quot;outlined&quot;&gt;xs=8&lt;/Item&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      )
  }
  </code></pre>
  <p>What am I doing wrong here?</p>