Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Migration] theme.typography.pxToRem is not a function

See original GitHub issue

Duplicates

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 GitHub Comments

1reaction

reicekcommented, Dec 8, 2021

Just noticed this on the documentation, I’ll check if this is what I was missing:

import { Theme } from '@mui/material/styles';

declare module '@mui/styles/defaultTheme' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
  interface DefaultTheme extends Theme {}
}

0reactions

SimonMulquincommented, Aug 31, 2022

Hello guys,

I found an alternative solution here: https://mui.com/material-ui/migration/troubleshooting/#storybook-and-emotion

It works perfectly for me 🙂