title: MUI custom theme not applying
body: <p>I'm trying to apply a custom MUI theme using a context provider, but the theme is not being applied in child components.</p>
  <p>Here is my palette code:</p>
  <pre><code>import React from &quot;react&quot;;
  import { createTheme, ThemeProvider } from &quot;@material-ui/core&quot;;
  import { orange } from &quot;@material-ui/core/colors&quot;;
  
  const theme = createTheme({
    palette: {
      primary: orange,
      secondary: {
        main: &quot;#000000&quot;,
      },
    },
  });
  
  export default function Palette({ children }) {
    return &lt;ThemeProvider theme={theme}&gt;{children}&lt;/ThemeProvider&gt;;
  }
  </code></pre>
  <p>And here is my custom button that uses it:</p>
  <pre><code>import React from &quot;react&quot;;
  import Icon from &quot;@material-ui/core/Icon&quot;;
  import Button from &quot;@mui/material/Button&quot;;
  import Palette from &quot;../Themes/Palette&quot;;
  
  export default function IconButton({ icon }) {
    return (
      &lt;Palette&gt;
        &lt;Button
          sx={{
            width: 60,
            height: 60,
            borderRadius: &quot;50%&quot;,
          }}
          variant=&quot;contained&quot;
        &gt;
          &lt;Icon&gt;{icon}&lt;/Icon&gt;
        &lt;/Button&gt;
      &lt;/Palette&gt;
    );
  }
  </code></pre>