Reactjs MUiv5和TSSReaction SSR问题：无法可靠地处理样式定义.CSSprops 中的ArrowFunctionExpression

我正在将我的MUI迁移到v5，并且我遇到了Make Styes"插补"模式的问题，如下所示:

 const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: (props) => {
      let bgColor = "inherit"
      if (props.colorPalette.toLowerCase() === COLORS.SAND) {
        bgColor = theme.palette.background.sand
      } else if (props.isGreenBG) {
        bgColor = theme.palette.primary.main
      } else {
        bgColor = theme.palette.common.white
      }
      return bgColor
    },
  },
  heading: {
    color: (props) => {
      if (props.isGreenBG) {
        return theme.palette.common.white
      }
      return theme.palette.primary.main
    },
    marginBottom: `15px`,
    letterSpacing: `normal`,
    [theme.breakpoints.down(`xs`)]: {
      fontSize: `2rem`,
      lineHeight: `2rem`,
    },
  },
  subhead: {
    color: (props) => {
      if (props.isGreenBG) {
        return theme.palette.common.white
      }
      return theme.palette.common.black
    },
    lineHeight: `1.5rem`,
    fontSize: `1.25rem`,
    [theme.breakpoints.down(`md`)]: {
      lineHeight: `1.125rem`,
      fontSize: `1rem`,
    },
  },
  body: {
    color: (props) => {
      if (props.isGreenBG) {
        return theme.palette.common.white
      }
      return theme.palette.text.lightHeader
    },
  },
}))

export const MyComponent = ({ colorPalette }) => {
  const isGreenBG = colorPalette.toLowerCase() === COLORS.GREEN1
  const classes = useStyles({
    isGreenBG,
    colorPalette,
  })

  // ...rest of component, for example...
  return <h1 className={classes.heading}>Just an example</h1>
}

我使用了code-mod，发现这些TODO://TODO JSS-to-TSS-Reaction代码:无法可靠地处理样式定义.Css属性中的ArrowFunctionExpression.

Here is what is displayed for the value in Chrome dev tools:

有没有办法通过SSR支持这种类型的模式？它在CSR上的工作与预期一样，除了重写之外，我找不到其他解决方案，但保留这个功能会很好.谢谢!