[CODEMOD] v6.0.0/sx-prop does not work on Typography color prop if the component is imported with path import

[ryan-mcginty-alation]

Steps to reproduce

Link to live example: (required)

Steps:

1. Run the codemod on this file with a path import:

import Typography from '@mui/material/Typography';

export function Test() {
  return (
    <Typography color='#fff' mb={5}>
      Test
    </Typography>
  );
}

Output:

import Typography from '@mui/material/Typography';

export function Test() {
  return (
    (<Typography color='#fff' sx={{
      mb: 5
    }}>Test
          </Typography>)
  );
}

2. Run the codemod on this file with a named import:

import {Typography} from '@mui/material';

export function Test() {
  return (
    <Typography color='#fff' mb={5}>
      Test
    </Typography>
  );
}

Output:

import {Typography} from '@mui/material';

export function Test() {
  return (
    (<Typography
      sx={{
        color: '#fff',
        mb: 5
      }}>Test
          </Typography>)
  );
}

Current behavior

Color prop is ignored but other system props are converted when a path import is used. When a named import is used it works correctly.

Expected behavior

Codemod should behave the same for both named and path imports

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.7
  Binaries:
    Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.90
    Edge: Not Found
    Safari: 18.0
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base: ^5.0.0-beta.24 => 5.0.0-beta.58 
    @mui/core-downloads-tracker:  6.1.1 
    @mui/icons-material: ^6.1.1 => 6.1.1 
    @mui/lab: ^6.0.0-beta.10 => 6.0.0-beta.10 
    @mui/material: ^6.1.1 => 6.1.1 
    @mui/private-theming:  6.1.1 
    @mui/styled-engine:  6.1.1 
    @mui/system: ^6.1.1 => 6.1.1 
    @mui/types: ^7.2.15 => 7.2.17 
    @mui/utils:  6.0.0-rc.0 
    @mui/x-data-grid: ^7.11.1 => 7.18.0 
    @mui/x-data-grid-generator: ^7.11.1 => 7.18.0 
    @mui/x-data-grid-premium:  7.18.0 
    @mui/x-data-grid-pro: ^7.11.1 => 7.18.0 
    @mui/x-date-pickers: ^7.11.1 => 7.18.0 
    @mui/x-date-pickers-pro: ^7.11.1 => 7.18.0 
    @mui/x-internals:  7.18.0 
    @mui/x-license: ^7.11.1 => 7.18.0 
    @mui/x-tree-view: ^7.11.1 => 7.18.0 
    @types/react: ^18.3.3 => 18.3.10 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: 5.3.3 => 5.3.3 

Search keywords: v6.0.0/sx-prop codemod

[siriwatknp]

Thanks for reporting the issue. The color with arbitrary value should be in the sx prop

I will open a PR to fix this.

[ryan-mcginty-alation]

Thank you @siriwatknp!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ryan-mcginty-alation How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.