重复问题

• 我搜索了现有的问题

最新版本

• 我测试了最新版本

重现步骤 🕹

步骤：

1. 从下面的文件开始
2. 运行 npx @mui/codemod v5.0.0/jss-to-styled dialog.js
3. 观察输出
   起始文件：

import React from 'react'
import MuiDialog from '@mui/material/Dialog'
import makeStyles from '@mui/styles/makeStyles'

const useDialogStyles = makeStyles((theme) => ({
  dialogPaper: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  },
}))

export function Dialog({
  open,
  onClose,
  children,
  maxWidth = '600px',
  ...props
}) {
  const classes = useDialogStyles({ maxWidth })

  return (
    <MuiDialog
      open={open}
      scroll={'body'}
      onClose={onClose}
      classes={{ paperScrollBody: classes.dialogPaper }}
      style={{ display: 'block' }}
      {...props}
    >
      {children}
    </MuiDialog>
  )
}

当前行为 😯

这个文件会被生成：

import React from 'react'
import { styled } from '@mui/material/styles';
import MuiDialog from '@mui/material/Dialog'
const PREFIX = 'dialog';

const classes = {
  dialogPaper: `${PREFIX}-dialogPaper`
};

const StyledMuiDialog = styled(MuiDialog)((
  {
    theme
  }
) => ({
  [`& .${classes.dialogPaper}`]: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  }
}));

const useDialogStyles = makeStyles((
  {
    theme
  }
) => ({
  [`& .${classes.dialogPaper}`]: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  }
}))

export function Dialog({
  open,
  onClose,
  children,
  maxWidth = '600px',
  ...props
}) {
  const classes = useDialogStyles({ maxWidth })

  return (
    <StyledMuiDialog
      open={open}
      scroll={'body'}
      onClose={onClose}
      classes={{ paperScrollBody: classes.dialogPaper }}
      style={{ display: 'block' }}
      {...props}
    >
      {children}
    </StyledMuiDialog>
  );
}

预期行为 🤔

makeStyles 调用和 useDialogStyles 钩子调用不应该再出现。我期望文件是这样的：

import React from 'react'
import { styled } from '@mui/material/styles';
import MuiDialog from '@mui/material/Dialog'
const PREFIX = 'dialog';

const classes = {
  dialogPaper: `${PREFIX}-dialogPaper`
};

const StyledMuiDialog = styled(MuiDialog)((
  {
    theme
  }
) => ({
  [`& .${classes.dialogPaper}`]: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  }
}));

export function Dialog({
  open,
  onClose,
  children,
  maxWidth = '600px',
  ...props
}) {
  return (
    <StyledMuiDialog
      open={open}
      scroll={'body'}
      onClose={onClose}
      classes={{ paperScrollBody: classes.dialogPaper }}
      style={{ display: 'block' }}
      {...props}
    >
      {children}
    </StyledMuiDialog>
  );
}

上下文 🔦

我正在尝试从 material UI v4 迁移到 v5。由于此代码修改没有产生可用的代码，因此我无法轻松进行此迁移。

你的环境 🌎

npx @mui/envinfo

I'm not able to run @mui/envinfo - it hangs and doesn't output anything or use any system resources.