yuri-sakharov Github contribution chart
yuri-sakharov Github Stats
yuri-sakharov Most Used Languages

Activity

12 Jul 2022

Issue Comment

Yuri-sakharov

MUI v5 does not work with Theme-UI

Duplicates

  • [X] I have searched the existing issues

Latest version

  • [X] I have tested the latest version

Current behavior 😯

Dear MUI 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 could 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. 

Expected behavior 🤔

Theme UI and MUI v5 work together flawlessly.

Steps 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' 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.

Context 🔦

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.

Your environment 🌎

❯ npx @mui/envinfo npx: Installierte 2 in 4.934s

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 react: ^17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 4.6.2 => 4.6.2

</details> 

Forked On 12 Jul 2022 at 08:38:08

Yuri-sakharov

Solution is here

Commented On 12 Jul 2022 at 08:38:08
Issue Comment

Yuri-sakharov

[ThemeProvider] not working from @mui/material/styles, but does from @mui/styles.

Hi,

I'm trying to port a moderately sized project from MaterialUI4 to MUI5. I'm following the migration instructions but have hit a bit of a wall with the following;

I am using the createStyles/makeStyles APIs from @mui/styles, however I get the following error when running unit tests or launching the project;

 MUI: The `styles` argument provided is invalid.
      You are providing a function without a theme in the context.
      One of the parent elements needs to use a ThemeProvider. 

My tests are all wrapped in a <ThemeProvider> instance.

My initial thoughts were I am somehow including multiple copies of React or another library which is causing this issue, however this does not appear to be the case.

By trial and error, I've found that changing the ThemeProvider import from import { ThemeProvider } from "@mui/material/styles"; to import { ThemeProvider } from "@mui/styles";

Allows the tests to pass, and the project to launch, but this doesn't look right, as the migration guide states;

https://mui.com/guides/migration-v4/#mui-styles

If you are using the utilities from @mui/styles together with the @mui/material, you should replace the use
of ThemeProvider from @mui/styles with the one exported from @mui/material/styles. This way, the theme
provided in the context will be available in both the styling utilities exported from @mui/styles, like
makeStyles, withStyles etc. and the MUI components. 

So before I start going through fixing the styles etc. Does anyone have any idea why I might be seeing this? Is this something that has been encountered before?

The only possible suspicious thing I've found is that running npm ls @mui/system

Results in the following;

my.project@0.1.0 C:\project_path\ClientApp
├─┬ @mui/lab@5.0.0-alpha.59
│ └── @mui/system@5.2.3
└─┬ @mui/material@5.2.3
  └── @mui/system@5.2.3 

Why would there be two copies of the @mui/system package? Notably this is where ThemeProvider lives so I see this as a red flag. Shouldn't these be deduped? The same thing happens with @mui/base.

By including @mui/system and @mui/base directly into my package.json this creates a deduping effect;

my.project@0.1.0 C:\project_path\ClientApp
├─┬ @mui/lab@5.0.0-alpha.59
│ └── @mui/system@5.2.3 deduped
├─┬ @mui/material@5.2.3
│ └── @mui/system@5.2.3 deduped
└── @mui/system@5.2.3 

The issue however, persists.

Node: 16.13.0 Npm: 8.1.0 React Scripts: 4.3.0

any help greatly appreciated!

Forked On 12 Jul 2022 at 08:35:59

Yuri-sakharov

Finally I found solution for yarn and styled-components. in package.json:

"dependencies": {
  "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",

},
"resolutions": {
  "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
} 

in yarn.lock important to have @mui/styled-engine version equal to @mui/styled-engine@npm:@mui/styled-engine-sc version for example "@mui/styled-engine@npm:@mui/styled-engine-sc@latest" has version "5.8.0" it means that @mui/styled-engine should be "@mui/styled-engine@^5.8.0" in all yarn.lock references. Final result of yarn.lock part:

 "@mui/styled-engine@^5.8.0", "@mui/styled-engine@npm:@mui/styled-engine-sc@latest":
  version "5.8.0"
  resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-5.8.0.tgz#20bc536dce25739e38fcd2586f100e70fbf02065"
  integrity sha512-46eRLWxjTF0d50Q1Q9tj96cgF41r7lesbXAy6kKocCdUfJ8rbIo36C4Ws8Pd7nfVsvaitTb7tmCbVQzDT3niJQ==
  dependencies:
    prop-types "^15.8.1"

"@mui/system@^5.9.0":
  version "5.9.0"
  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.9.0.tgz#804055bc6fcd557479b8b28dfca7ed5c98fd9bf9"
  integrity sha512-KLZDYMmT1usokEJH+raGTh1SbdOx4BVrT+wg8nRpKGNii2sfc3ntuJSKuv3Fu9oeC9xVFTnNBHXKrpJuxeDcqg==
  dependencies:
    "@babel/runtime" "^7.17.2"
    "@mui/private-theming" "^5.9.0"
    "@mui/styled-engine" "^5.8.0"
    "@mui/types" "^7.1.4"
    "@mui/utils" "^5.9.0"
    clsx "^1.2.1"
    csstype "^3.1.0"
    prop-types "^15.8.1" 

Commented On 12 Jul 2022 at 08:35:59
Issue Comment

Yuri-sakharov

[ThemeProvider] not working from @mui/material/styles, but does from @mui/styles.

Hi,

I'm trying to port a moderately sized project from MaterialUI4 to MUI5. I'm following the migration instructions but have hit a bit of a wall with the following;

I am using the createStyles/makeStyles APIs from @mui/styles, however I get the following error when running unit tests or launching the project;

 MUI: The `styles` argument provided is invalid.
      You are providing a function without a theme in the context.
      One of the parent elements needs to use a ThemeProvider. 

My tests are all wrapped in a <ThemeProvider> instance.

My initial thoughts were I am somehow including multiple copies of React or another library which is causing this issue, however this does not appear to be the case.

By trial and error, I've found that changing the ThemeProvider import from import { ThemeProvider } from "@mui/material/styles"; to import { ThemeProvider } from "@mui/styles";

Allows the tests to pass, and the project to launch, but this doesn't look right, as the migration guide states;

https://mui.com/guides/migration-v4/#mui-styles

If you are using the utilities from @mui/styles together with the @mui/material, you should replace the use
of ThemeProvider from @mui/styles with the one exported from @mui/material/styles. This way, the theme
provided in the context will be available in both the styling utilities exported from @mui/styles, like
makeStyles, withStyles etc. and the MUI components. 

So before I start going through fixing the styles etc. Does anyone have any idea why I might be seeing this? Is this something that has been encountered before?

The only possible suspicious thing I've found is that running npm ls @mui/system

Results in the following;

my.project@0.1.0 C:\project_path\ClientApp
├─┬ @mui/lab@5.0.0-alpha.59
│ └── @mui/system@5.2.3
└─┬ @mui/material@5.2.3
  └── @mui/system@5.2.3 

Why would there be two copies of the @mui/system package? Notably this is where ThemeProvider lives so I see this as a red flag. Shouldn't these be deduped? The same thing happens with @mui/base.

By including @mui/system and @mui/base directly into my package.json this creates a deduping effect;

my.project@0.1.0 C:\project_path\ClientApp
├─┬ @mui/lab@5.0.0-alpha.59
│ └── @mui/system@5.2.3 deduped
├─┬ @mui/material@5.2.3
│ └── @mui/system@5.2.3 deduped
└── @mui/system@5.2.3 

The issue however, persists.

Node: 16.13.0 Npm: 8.1.0 React Scripts: 4.3.0

any help greatly appreciated!

Forked On 12 Jul 2022 at 11:58:08

Yuri-sakharov

Finally I found solution and it works for me. I added tss-react package, emotion cache. Followed this topic also people talking about it here

Commented On 12 Jul 2022 at 11:58:08
Issue Comment

Yuri-sakharov

MUI v5 does not work with Theme-UI

Duplicates

  • [X] I have searched the existing issues

Latest version

  • [X] I have tested the latest version

Current behavior 😯

Dear MUI 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 could 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. 

Expected behavior 🤔

Theme UI and MUI v5 work together flawlessly.

Steps 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' 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.

Context 🔦

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.

Your environment 🌎

❯ npx @mui/envinfo npx: Installierte 2 in 4.934s

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 react: ^17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 4.6.2 => 4.6.2

</details> 

Forked On 12 Jul 2022 at 11:57:07

Yuri-sakharov

Finally I found solution and it works for me. I added tss-react package and followed this topic also people talking about it here

Commented On 12 Jul 2022 at 11:57:07
Issue Comment

Yuri-sakharov

[ThemeProvider] not working from @mui/material/styles, but does from @mui/styles.

Hi,

I'm trying to port a moderately sized project from MaterialUI4 to MUI5. I'm following the migration instructions but have hit a bit of a wall with the following;

I am using the createStyles/makeStyles APIs from @mui/styles, however I get the following error when running unit tests or launching the project;

 MUI: The `styles` argument provided is invalid.
      You are providing a function without a theme in the context.
      One of the parent elements needs to use a ThemeProvider. 

My tests are all wrapped in a <ThemeProvider> instance.

My initial thoughts were I am somehow including multiple copies of React or another library which is causing this issue, however this does not appear to be the case.

By trial and error, I've found that changing the ThemeProvider import from import { ThemeProvider } from "@mui/material/styles"; to import { ThemeProvider } from "@mui/styles";

Allows the tests to pass, and the project to launch, but this doesn't look right, as the migration guide states;

https://mui.com/guides/migration-v4/#mui-styles

If you are using the utilities from @mui/styles together with the @mui/material, you should replace the use
of ThemeProvider from @mui/styles with the one exported from @mui/material/styles. This way, the theme
provided in the context will be available in both the styling utilities exported from @mui/styles, like
makeStyles, withStyles etc. and the MUI components. 

So before I start going through fixing the styles etc. Does anyone have any idea why I might be seeing this? Is this something that has been encountered before?

The only possible suspicious thing I've found is that running npm ls @mui/system

Results in the following;

my.project@0.1.0 C:\project_path\ClientApp
├─┬ @mui/lab@5.0.0-alpha.59
│ └── @mui/system@5.2.3
└─┬ @mui/material@5.2.3
  └── @mui/system@5.2.3 

Why would there be two copies of the @mui/system package? Notably this is where ThemeProvider lives so I see this as a red flag. Shouldn't these be deduped? The same thing happens with @mui/base.

By including @mui/system and @mui/base directly into my package.json this creates a deduping effect;

my.project@0.1.0 C:\project_path\ClientApp
├─┬ @mui/lab@5.0.0-alpha.59
│ └── @mui/system@5.2.3 deduped
├─┬ @mui/material@5.2.3
│ └── @mui/system@5.2.3 deduped
└── @mui/system@5.2.3 

The issue however, persists.

Node: 16.13.0 Npm: 8.1.0 React Scripts: 4.3.0

any help greatly appreciated!

Forked On 08 Jul 2022 at 12:55:13

Yuri-sakharov

I have the same issue MUI V5 component just doesn't get the custom theme unfortunately. Looks like it relates to this issue. I will really appreciate any solution!

Commented On 08 Jul 2022 at 12:55:13
Issue Comment

Yuri-sakharov

MUI v5 does not work with Theme-UI

Duplicates

  • [X] I have searched the existing issues

Latest version

  • [X] I have tested the latest version

Current behavior 😯

Dear MUI 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 could 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. 

Expected behavior 🤔

Theme UI and MUI v5 work together flawlessly.

Steps 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' 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.

Context 🔦

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.

Your environment 🌎

❯ npx @mui/envinfo npx: Installierte 2 in 4.934s

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 react: ^17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 4.6.2 => 4.6.2

</details> 

Forked On 08 Jul 2022 at 12:54:22

Yuri-sakharov

I have the same issue but without crashing. The V5 component just doesn't get the custom theme unfortunately. Looks like it relates to this issue. I will really appreciate any solution!

Commented On 08 Jul 2022 at 12:54:22

Yuri-sakharov

MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

Forked On 07 Jul 2022 at 11:17:39