question-mark
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:

image

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:

image

The error coming from IconButton.js

image

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`
  System:
    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
  Binaries:
    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
  Managers:
    pip2: 19.2.3 - C:\Python27\Scripts\pip2.EXE
  Utilities:
    Git: 2.30.0.
  SDKs:
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      Versions: 10.0.17763.0
  IDEs:
    VSCode: 1.62.3 - C:\Users\Cesar_Anton\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 5.0.16 - C:\windows\system32\bash.EXE
    Python: 2.7.17
  Browsers:
    Chrome: 96.0.4664.45
    Edge: Spartan (44.17763.831.0)
    Internet Explorer: 11.0.17763.771

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (1 by maintainers)

github_iconTop 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 🙂

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found