React 18.x.x and MUI

[acomanescu]

I've tried to use this in a Next.js app using React 18.2.0 and MUI v5 and the styles from MUI never render. Is there anything else required?

[acomanescu]

Closing this, I found the solution:

<Frame style={{ width: '100%', height: 300, border: 'none' }}>
  <FrameContextConsumer>
    {({ document }) => {
      const cache = createCache({
        key: 'css',
        container: document?.head,
        prepend: true
      });

      return (
        <CacheProvider value={cache}>
          <ThemeProvider theme={natureTheme}>
            <CssBaseline />
            <Button>Hello</Button>
          </ThemeProvider>
        </CacheProvider>
      );
    }}
  </FrameContextConsumer>
</Frame>