title: export 'theme' (imported as 'theme') was not found in './theme' (possible exports: default)
body: <p>I am getting above error when trying to export theme from <code>index.js</code> file. Here is the source code of <code>index.js</code> file.</p>
  <pre><code>import { createTheme } from &quot;@mui/material&quot;;
  import shadows from &quot;./shadows&quot;;
  import typography from &quot;./typography&quot;;
  
  const theme = createTheme({
    palette: {
      background: {
        default: &quot;#fff&quot;,
      },
      primary: {
        contrastText: &quot;#ffffff&quot;,
        main: &quot;#212a32&quot;,
        light: &quot;#465867&quot;,
      },
      secondary: {
        contrastText: &quot;#fff&quot;,
        main: &quot;#ff7300&quot;,
      },
      text: {
        primary: &quot;#172b4d&quot;,
        secondary: &quot;#6b778c&quot;,
      },
      success: {
        contrastText: &quot;#ffffff&quot;,
        main: &quot;#05c46b&quot;,
      },
      disabled: {
        main: &quot;rgba(0, 0, 0, 0.30)&quot;
      }, 
      colors: {
        delete: &quot;#F37878&quot;,
        white: &quot;#FFF&quot;
      } 
    },
    transitions: {
      duration: {
        shortest: 150,
        shorter: 200,
        short: 250,
        // most basic recommended timing
        standard: 300,
        // this is to be used in complex animations
        complex: 375,
        // recommended when something is entering screen
        enteringScreen: 225,
        // recommended when something is leaving screen
        leavingScreen: 195,
      },
      easing: {
        // This is the most common easing curve.
        easeInOut: &quot;cubic-bezier(0.4, 0, 0.2, 1)&quot;,
        // Objects enter the screen at full velocity from off-screen and
        // slowly decelerate to a resting point.
        easeOut: &quot;cubic-bezier(0.0, 0, 0.2, 1)&quot;,
        // Objects leave the screen at full velocity. They do not decelerate when off-screen.
        easeIn: &quot;cubic-bezier(0.4, 0, 1, 1)&quot;,
        // The sharp curve is used by objects that may return to the screen at any time.
        sharp: &quot;cubic-bezier(0.4, 0, 0.6, 1)&quot;,
      },
    },
    shadows,
    typography,
    components: {
      MuiCollapse: {
        styleOverrides: {
          wrapperInner: {
            width: &quot;100%&quot;,
          },
        },
      },
    },
  });
  
  export default theme;
  </code></pre>
  <p>Here is how I have imported it.</p>
  <pre><code>import './App.css';
  import Main from './component/Main';
  import {BrowserRouter,Route,Routes} from &quot;react-router-dom&quot;;
  import { ThemeProvider } from 'styled-components';
  import theme from &quot;./theme&quot;;
  
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
         &lt;ThemeProvider theme={theme}&gt;
          &lt;BrowserRouter&gt;
          &lt;Routes&gt;
          &lt;Route path=&quot;/*&quot; element={&lt;Main/&gt;}/&gt; 
          &lt;/Routes&gt; 
          &lt;/BrowserRouter&gt;
          &lt;/ThemeProvider&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>How can I fix this?</p>