[useStyles] Prop passing after v5 migration

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

We are trying to migrate from v4 to v5 and we use a lot of makeStyles and useStyles. We are trying to migrate the style component and apply the styled code mode, but many files are throwing errors. For example, we use useStyles for prop pass, but the code mod using useStyles was deleted, but props remained idle. And naturally the app doesn’t compile.

Expected behavior 🤔

We don’t know how to use the props we give to useStyles when using styled-component. If we know what we can use instead of use useStyles, we can apply it.

Your environment 🌎

`npx @mui/envinfo`

 System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE        
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD 
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.34)
  npmPackages:
    @emotion/react: ^11.6.0 => 11.6.0 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.55 
    @mui/codemod: ^5.1.1 => 5.1.1 
    @mui/icons-material: ^5.1.1 => 5.1.1 
    @mui/lab: ^5.0.0-alpha.55 => 5.0.0-alpha.55 
    @mui/material: ^5.1.1 => 5.1.1 
    @mui/private-theming:  5.1.1 
    @mui/styled-engine:  5.1.1 
    @mui/styles: ^5.1.1 => 5.1.1 
    @mui/system: ^5.1.1 => 5.1.1 
    @mui/types: ^7.1.0 => 7.1.0 
    @mui/utils:  5.1.1 
    @types/react:  16.9.56 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components:  3.4.10 
    typescript:  3.5.1

[mnajdova]

@cengizcmataraci as far as I can see the API you are using is not correct. Check https://mui.com/styles/basics/#adapting-based-on-props

On the other hand, if you wish to adopt to v5, you can use styled() or sx prop, or migrate to tss-react for using an API similar to makeStyles. I hope this helps.

[cengizcmataraci]

I also get the error “Transformation error (Unexpected token (168:2)) SyntaxError: Unexpected token (168:2)” when I refer to the styled code mode, and another 116 files also get an error.