我可以用MUI v6和pigment-css传递sx props吗？

Question

我目前正在将团队的 Next.Js + MUI 应用程序迁移到 MUI v6。 在这样做时，我在尝试运行开发服务器时遇到了这个错误：

⨯ unhandledRejection: SyntaxError: path/to/my/Component.tsx: @pigment-css/react: You can only use variables in the spread that are defined in the root scope of the file.
  59 |                     }
  60 |                 },
> 61 |                 ...sx
     |                 ^^^^^
  62 |             }),
  63 |         ...props,
  64 |         children: children

我对底层消息有点困惑，只想得到一些确认：是否无法使用pigment-css将 sx props 传递给 MUI v6 中的组件？

我可以使用 CSS 类解决底层样式问题，但 sx 属性始终是我在 MUI v5 中的首选解决方案。 MUI v6 范式是否已转向更多基于类的样式？

我尝试的另一件事是将 sx 道具与样式更明确地合并，通过：

            sx={(theme) => {
                const baseStyles = {
                    // my styles
                };
                const completeStyles = sx
                    ? { ...baseStyles, ...sx }
                    : baseStyles;

                return completeStyles as SystemStyleObject;
            }}

但无济于事，因为我遇到了另一个错误：

SyntaxError: path/to/my/Component.tsx: @pigment-css/react: sx prop only supports arrow functions directly returning an object, for example () => ({color: 'red'}). You can accept theme object in the params if required.
  22 |     ]);
  23 |     return /*#__PURE__*/ _jsxDEV(Box, {
> 24 |         sx: (theme)=>{
     |                      ^
  25 |             const baseStyles = {

任何帮助将不胜感激。

Answer 1

你不能再像那样展开你传承下来的 sx 道具了。您应该做的是在自定义组件的 sx prop 中创建一个数组，然后从自定义组件添加 sx 属性，并将 sx prop 作为单独的对象传递到该数组。

        sx={[
            (theme) => ({
                // styles of custom component
            }),
            ...(Array.isArray(sx) ? sx : [sx])
        ]}