MUIv5 和 tss-react SSR 问题：无法可靠地处理样式定义。CSS prop 中的 ArrowFunctionExpression-解网

问：

我正在将我的 mui 迁移到 v5，并且遇到了 makeStyes“插值”模式的问题，如下所示：

 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-react codemod：无法可靠地处理样式定义。CSS 属性中的 ArrowFunctionExpression。

以下是 Chrome 开发工具中显示的值：

有没有办法用 SSR 支持这种类型的模式？它在 CSR 中按预期工作，除了重写之外，我在任何地方都找不到解决方案，但保持此功能会很好。谢谢！

reactjs material-ui next.js13

使用 tss-react 支持该功能没有任何问题，我只是没有处理 codemod 中所有可能的用例（我主要处理发生在我自己的代码库中的情况）。当 codemod 检测到它知道自己无法处理的情况时，它会插入 TODO 注释。这只是意味着您需要手动迁移该案例的语法。是和属性/参数传递给？colorPaletteisGreenBGuseStyles

0赞 Ryan Cogswell 11/17/2023

如果你展示一个更完整的代码示例，其中包括完整的代码以及如何调用这些代码，以便我可以看到来自哪里和来自哪里，我可以向你展示用于 tss-react 的等效语法。makeStylesuseStylescolorPaletteisGreenBG

0赞 Logan Murphy 11/17/2023

我认为 code-mod 没有任何问题，但我在网上找不到任何使用 tss-react 支持此类功能的解决方案。我将这两个作为参数传递以使用样式，并更新上面的示例以获得更好的上下文。我很感激你看这个，我开始认为我只需要从头开始重写逻辑，这并不理想。谢谢！

0赞 Logan Murphy 11/17/2023

我添加了一个更完整的示例用法@RyanCogswell，如果您想了解更多详细信息，请告诉我，谢谢！

0赞 Logan Murphy 11/17/2023

我已经找到了 docs.tss-react.dev/api/makestyles 像这样的传递参数的解决方案，但它们不能作为函数工作

答：

1赞 Ryan Cogswell 11/17/2023 #1

tss-react 不支持单个样式规则或 CSS 道具的函数，但调用的主体是一个函数，因此所有逻辑都可以移动到该函数的顶部。makeStyles

下面是您的代码的工作版本（尽管我将样式精简为和）。除了将函数逻辑移动到样式定义上方之外，还需要在调用的第一行主题之后指定参数（例如）。rootheadingmakeStyles(theme, { colorPalette, isGreenBG })

import { makeStyles } from "tss-react/mui";

const useStyles = makeStyles()((theme, { colorPalette, isGreenBG }) => {
  let bgColor = "inherit";
  if (colorPalette.toLowerCase() === "sand") {
    bgColor = theme.palette.background.sand;
  } else if (isGreenBG) {
    bgColor = theme.palette.primary.main;
  } else {
    bgColor = theme.palette.common.white;
  }
  const color = isGreenBG
    ? theme.palette.common.white
    : theme.palette.primary.main;
  return {
    root: {
      backgroundColor: bgColor
    },
    heading: {
      color,
      marginBottom: `15px`,
      letterSpacing: `normal`,
      [theme.breakpoints.down(`xs`)]: {
        fontSize: `2rem`,
        lineHeight: `2rem`
      }
    }
  };
});

const MyComponent = ({ colorPalette }) => {
  const isGreenBG = colorPalette.toLowerCase() === "green1";
  const { classes } = useStyles({
    isGreenBG,
    colorPalette
  });

  return (
    <div className={classes.root}>
      <h1 className={classes.heading}>Just an example</h1>
    </div>
  );
};
export default function Demo() {
  return <MyComponent colorPalette="green1" />;
}

MUIv5 和 tss-react SSR 问题：无法可靠地处理样式定义。CSS prop 中的 ArrowFunctionExpression

MUIv5 and tss-react SSR issue: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop

评论

评论