title: TS2322 Error Type {} is not assignable to type 'undefined'. when using SX Prop Nested Component. MUI Drawer example not compiling
body: <p>I am trying to compile and run the MUI Drawer component (permanent fixed) version and typescript is not compiling.  It is throwing a <strong>TS2322</strong> error.</p>
  <pre><code>$ npm run build
  
  &gt; kamerai_mgr@0.1.1 build
  &gt; react-scripts build
  
  Creating an optimized production build...
  Failed to compile.
  
  TS2322: Type '{ width: number; flexShrink: number; &quot;&amp; .MuiDrawer-paper&quot;: { width: number; boxSizing: string; }; }' is not assignable to type '{ [cssVariable: string]: ReactText; } | SystemCssProperties&lt;Theme&gt; | CSSPseudoSelectorProps&lt;Theme&gt; | CSSSelectorObject&lt;Theme&gt; | ((theme: Theme) =&gt; SystemStyleObject&lt;Theme&gt;) | (boolean | ... 5 more ... | null)[] | null | undefined'.
    Type '{ width: number; flexShrink: number; &quot;&amp; .MuiDrawer-paper&quot;: { width: number; boxSizing: string; }; }' is not assignable to type 'undefined'.
       95 |           &lt;/AppBar&gt;
       96 |           &lt;Drawer
    &gt;  97 |             sx={{
          |             ^^
       98 |               width: drawerWidth,
       99 |               flexShrink: 0, 
      100 |               &quot;&amp; .MuiDrawer-paper&quot;: {
  </code></pre>
  <p>This is the component code:</p>
  <pre><code>        &lt;Drawer
              sx={{
                width: drawerWidth,
                flexShrink: 0, 
                &quot;&amp; .MuiDrawer-paper&quot;: {
                  width: drawerWidth,
                  boxSizing: 'border-box',
                }
              }}
              variant=&quot;permanent&quot;
              anchor=&quot;left&quot;
            &gt;
  </code></pre>
  <p>I am new to typescript and react so I am not sure why this is popping up.  If I remove the <code>width</code> and <code>flexShrink</code> props, then it works.  Also, if I remove the <code>&quot;$ .MuiDrawer-paper&quot;</code> and leave the other two, then also it works.</p>
  <p>To be clear</p>
  <pre><code>sx={{
     width: drawerWidth,
     flexShrink: 0, 
     
     }}
     variant=&quot;permanent&quot;
     anchor=&quot;left&quot;
     &gt;
  </code></pre>
  <p>works;  and so does</p>
  <pre><code>sx={{
         
         &quot;&amp; .MuiDrawer-paper&quot;: {
         width: drawerWidth,
         boxSizing: 'border-box',
         }
         }}
         variant=&quot;permanent&quot;
         anchor=&quot;left&quot;
         &gt;
  </code></pre>
  <p>So I am guessing that something about the nested selector is causing the issue.  Could anyone guide me on what I may be missing ?</p>