Theme-UI and Material UI v5 not working together out of the box

Describe the bug Dear Theme UI dev team and community,

my team maintains a frontend which utilizes MUI v4 and Theme UI. We are trying to upgrade to MUI v5 but are not able to because of a bug which occurs when using Theme UI and MUI v5 together. Using both libraries ThemeProviders, MUI will crash our app under specific circumstances. I already created an issue at MUI’s github project, too, because I don’t know which library is producing the bug.

I was able to create a codesandbox example reproducing the error: https://codesandbox.io/s/github/seisenreich/theme-ui-vs-mui-v5/tree/main/?file=/src/App.tsx

The crash seems to occur everytime you try to use a component which has access to any property of MUI’s theme. This is an assumption - I have no proof for this statement, because I didn’t find and read the code which could be responsible for this. Fact is: some MUI components will cause a crash and others don’t. But the MUI components which crash the application will always trigger different error messages. And these messages content seems to correlate to the theme props accessible by the error throwing components. E.g. will fire this one: Uncaught TypeError: theme.breakpoints is undefined

A simple example: You can use MUI’s component without crashing the app as it’s props do not seem to have access to any MUI theme property. When using MUI’s component the app will crash with the message Uncaught TypeError: theme.breakpoints is undefined because 's sx, sm, md, ld and xl props have access to theme.breakpoints.

I don’t get why this happens. Can you help me?

Also the full error message output with callstack for you:

TypeError
theme.breakpoints is undefined
generateDirection@https://wpfvdf.csb.app/node_modules/
[mui/material/Grid/Grid.js:101:5]()
muiStyledResolver/expressionsWithDefaultTheme</<@https://wpfvdf.csb.app/node_modules/
[mui/system/esm/createStyled.js:96:18]()
handleInterpolation@https://wpfvdf.csb.app/node_modules/
[emotion/serialize/dist/emotion-serialize.browser.esm.js:126:37]()
serializeStyles@https://wpfvdf.csb.app/node_modules/
[emotion/serialize/dist/emotion-serialize.browser.esm.js:226:15]()
createStyled/</Styled<@https://wpfvdf.csb.app/node_modules/
[emotion/styled/base/dist/emotion-styled-base.browser.esm.js:106:69]()
withEmotionCache/<@https://wpfvdf.csb.app/node_modules/
[emotion/react/dist/emotion-element-cbed451f.browser.esm.js:110:12]()
renderWithHooks
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:14985:27]()
updateForwardRef
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:17044:20]()
beginWork
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19098:16]()
callCallback
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3945:14]()
invokeGuardedCallbackDev
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3994:16]()
invokeGuardedCallback
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4056:31]()
beginWork$1
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:23964:28]()
performUnitOfWork
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22776:12]()
workLoopSync
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22707:22]()
renderRootSync
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22670:7]()
performSyncWorkOnRoot
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22293:18]()
scheduleUpdateOnFiber
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21881:28]()
updateContainer
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25482:24]()
legacyRenderSubtreeIntoContainer/<
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26021:22]()
unbatchedUpdates
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22431:12]()
legacyRenderSubtreeIntoContainer
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26020:21]()
render
[https://wpfvdf.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26103:10]()
$csb$eval
[/src/index.tsx:6]()

  3 | import App from "./App";
  4 | 
  5 | const rootElement = document.getElementById("root");
> 6 | render(<App />, rootElement);
  7 | 

View compiled
▶ 10 stack frames were collapsed.

To Reproduce

Look at this codesandbox: https://codesandbox.io/s/github/seisenreich/theme-ui-vs-mui-v5/tree/main/?file=/src/App.tsx

Or follow these Steps:

1. Install clean react project with CRA or any other setup tool you like - TypeScript usage is optional
2. Install MUI v5 dependencies: npm install @mui/material @emotion/react @emotion/styled
3. Follow MUI v5’s installation instructions https://mui.com/getting-started/installation/
4. Install Theme UI dependencies: npm install theme-ui @emotion/react @emotion/styled @mdx-js/react
5. Follow Theme UI’s Getting Started guide to set it up https://theme-ui.com/getting-started/
6. Follow the automatic Theme UI jsx pragma setup guide https://theme-ui.com/guides/jsx-pragma/#using-babelpreset-react
7. Wrap your app into both libraries’ <ThemeProvider /> components using aliases for each for better readability
8. Use a MUI v5 component in between the wrapping providers which uses any theme prop of MUI’s theme. E.g. the Grid component, which has access to theme.breakpoints
9. Load your app
10. Boom.

Expected behavior Theme UI and MUI v5 work together flawlessly.

Additional context

The error occurs in any browser, tested in Firefox, Chrome, and Safari on both Linux and Mac OS.

System:
    OS: Linux 5.15 Manjaro Linux
  Binaries:
    Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node
    Yarn: 1.22.17 - ~/Code/WAF/frontend/node_modules/.bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.3/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 97.0.1
  npmPackages:
    @emotion/react: 11.8.1 => 11.8.1 
    @emotion/styled: 11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.70 
    @mui/icons-material: 5.4.4 => 5.4.4 
    @mui/lab: 5.0.0-alpha.71 => 5.0.0-alpha.71 
    @mui/material: 5.4.4 => 5.4.4 
    @mui/private-theming:  5.4.4 
    @mui/styled-engine:  5.4.4 
    @mui/styles: 5.4.4 => 5.4.4 
    @mui/system:  5.4.4 
    @mui/types:  7.1.2 
    @mui/utils:  5.4.4 
    @types/react: 17.0.39 => 17.0.39
    @theme-ui/core: 0.13.1 => 0.13.1,
    @theme-ui/css: 0.13.1 => 0.13.1,
    @theme-ui: 0.13.1 => 0.13.1,
    react: ^17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.6.2 => 4.6.2

[herrethan]

@seisenreich I’m working on a very similar design system project that uses Theme-UI as a base and MUI v5 for extraneous more fully fleshed out components like tables, date pickers, tooltips, etc. I have found luck so far in carefully creating a merged theme that satisfies both component families, but using a central source for values (design tokens). Some areas I had to do some jumping around were breakpoints and transitions since the two libraries expect different structures, by providing the proper structure to their respective <ThemeProvider>s, but keeping the theme-ui theme its own munged MUI/Theme-UI structure for components that need the reference. Getting this to work in Storybook is another story 😄, but so far the library itself is behaving.

[herrethan]

Hey @andycoles, unfortunately its a private project, but I created gists to show where we are at currently:

Theme-ui theme: https://gist.github.com/herrethan/a17e98427b5af61b520dfe2c3ba3085e MUI-theme: https://gist.github.com/herrethan/1eeff6cff554e8230f963841a2c1313b

You’ll see the MUI theme basically inherits everything it needs from the theme-ui theme. So far, as expected, the only time we need the mui-theme is for mui components that specifically reference breakpoints or transitions, in our particular case.

Sometimes we are forced to do internally wrap, and rewrap components if we need to nest:

<MUIThemeProvider>
  <MUIDrawer>
    <ThemeUIThemeProvider>
      ...some theme-ui themed content wrapped by an mui-themed thing
    <ThemeUIProvider>
  </MUIDrawer>
</MUIThemeProvider>