[Migration] theme.typography.pxToRem is not a function
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
After migrating to MUI 5 (from v4) I’m getting this Type error:
Expected behavior 🤔
It should render without issues.
Steps to reproduce 🕹
Even basic components throws this error, seems the component can’t access it’s internal theme.
Throws error:
<Box component="div" >
<IconButton aria-label="menu">
<MenuIcon />
</IconButton>
</Box>
Works:
<Box component="div" >
TEST
</Box>
On the console log:
The error coming from IconButton.js
Context 🔦
Trying to update from MUI 4 to MUI 5 on a Storybook (6.4.8) project.
Maybe MUI 5 needs different TS configuration, but this was working fine on MUI 4.
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"lib": ["es2015", "dom"],
"outDir": "./dist/",
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"declaration": true,
"sourceMap": true
},
"include": ["src"]
}
Your environment 🌎
`npx @mui/envinfo`
[4mSystem:[0m
OS: Windows 10 10.0.17763
CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
Memory: 2.50 GB / 15.85 GB
[4mBinaries:[0m
Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD
[4mManagers:[0m
pip2: 19.2.3 - C:\Python27\Scripts\pip2.EXE
[4mUtilities:[0m
Git: 2.30.0.
[4mSDKs:[0m
[4mWindows SDK:[0m
AllowDevelopmentWithoutDevLicense: Enabled
Versions: 10.0.17763.0
[4mIDEs:[0m
VSCode: 1.62.3 - C:\Users\Cesar_Anton\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
[4mLanguages:[0m
Bash: 5.0.16 - C:\windows\system32\bash.EXE
Python: 2.7.17
[4mBrowsers:[0m
Chrome: 96.0.4664.45
Edge: Spartan (44.17763.831.0)
Internet Explorer: 11.0.17763.771
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (1 by maintainers)
Top Results From Across the Web
Cannot access pxToRem function in Material-ui for theme
Material UI gives us access to override css classes by using createMuiTheme . You have to pass down theme to your app with...
Read more >Troubleshooting - Material UI - MUI
This document covers known issues and common problems encountered when migrating from Material UI v4 to v5.
Read more >material-ui/core.Typography.pxToRem JavaScript and Node.js ...
heading: { fontSize: theme.typography.pxToRem(15), ... How to use. pxToRem. function. in. Typography ... pxToRem(15), fontWeight: theme.typography.
Read more >Design Patterns with React Easy State | by Bertalan Miklos
Don't worry if you are not familiar with Easy State yet, you already know enough to ... forEach(params, function serialize(val, key) {\\n if...
Read more >@mui/codemod - npm
A combination of all important transformers for migrating v4 to v5. ... Arrow functions as the value for a CSS prop will not...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Just noticed this on the documentation, I’ll check if this is what I was missing:
Hello guys,
I found an alternative solution here: https://mui.com/material-ui/migration/troubleshooting/#storybook-and-emotion
It works perfectly for me 🙂