title: Importing a dynamic MaterialUI theme object from a separate file?
body: <p>Can someone help me understand the correct syntax for allowing a dynamic theme object to be imported from a separate file?</p>
  <p>I am trying to get the system theme from a media query and then set the theme dynamically.</p>
  <p>This works fine if I leave everything all in the main App function like this:
  <a href="https://stackblitz.com/edit/theme-builder-working-all-in-one?file=index.js" rel="nofollow noreferrer">https://stackblitz.com/edit/theme-builder-working-all-in-one?file=index.js</a></p>
  <p>But I want to have it broken up into different files for organization in the example below but my attempt is broken, I get the error: <code>themeProvider_js_1.default is not a function</code></p>
  <p>broken example:
  <a href="https://stackblitz.com/edit/theme-builder-broken?file=index.js" rel="nofollow noreferrer">https://stackblitz.com/edit/theme-builder-broken?file=index.js</a></p>
  <p>This is a second try of refactoring, no errors, I can see the ThemeObject existing in the console log but the system theme isn't being applied:
  <a href="https://stackblitz.com/edit/theme-builder-broken-btyufg?file=index.js" rel="nofollow noreferrer">https://stackblitz.com/edit/theme-builder-broken-btyufg?file=index.js</a></p>
  <p>Code for the future:
  working code, but I want to refactor this so the theme and media query objects are outside of the App component:</p>
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import useMediaQuery from '@material-ui/core/useMediaQuery';
  import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
  import CssBaseline from '@material-ui/core/CssBaseline';
  
  function App() {
  
    const prefersDarkMode = useMediaQuery('(prefers-color-scheme)');
  
    const theme = React.useMemo(
      () =&gt;
        createMuiTheme({
          palette: {
            type: prefersDarkMode ? 'dark' : 'light',
          },
        }),
      [prefersDarkMode],
    );
  
    return (
      &lt;ThemeProvider theme={theme}&gt;
      &lt;CssBaseline/&gt;
          &lt;p&gt;
            Start editing to see some magic happen :)
          &lt;/p&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  
  </code></pre>
  <p>broken refactor attempt:</p>
  <p>App component</p>
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import useMediaQuery from '@material-ui/core/useMediaQuery';
  import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
  
  import themeBuilder from './themeProvider.js'
  
  function App() {
  
    return (
      &lt;ThemeProvider theme={themeBuilder()}&gt;
          &lt;p&gt;
            Start editing to see some magic happen :)
          &lt;/p&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  
  </code></pre>
  <p>themeBuilder</p>
  <pre><code>import React from 'react';
  import { createMuiTheme } from '@material-ui/core/styles';
  import useMediaQuery from '@material-ui/core/useMediaQuery';
  
  function themeBuilder() {
  
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme)');
  
  const theme = React.useMemo(
      () =&gt;
        createMuiTheme({
          palette: {
            type: prefersDarkMode ? 'dark' : 'light',
          },
        }),
      [prefersDarkMode],
    );
  
    return theme
  }
  </code></pre>