Typescript 样式组件\"该节点的类型无法序列化，因为它的属性\'[$$PropertyValue]\'无法序列化\"答案

【问题标题】：Typescript styled component "The type of this node cannot be serialized because its property '[$$PropertyValue]' cannot be serialized"Typescript 样式组件\"该节点的类型无法序列化，因为它的属性\'[$$PropertyValue]\'无法序列化\"
【发布时间】：2022-11-12 11:09:44
【问题描述】：

我正在使用 NextJS、TypeScript 和 Stitches CSS 库构建一个服务器端呈现的网站。

当使用 Stitches styled 函数创建样式组件时，我收到以下 lint 错误：

The type of this node cannot be serialized because its property '[$$PropertyValue]' cannot be serialized.ts(4118)

这是我的stitches.config 文件的一部分：

// ...
export const {
  styled, // using this to create styled components
  css,
  theme,
  createTheme,
  globalCss,
} = createStitches({
  theme: {
    colors: {
      ...gray,
      ...mauve,
    }
  }
})

这是具有 lint 错误的组件文件之一：

import { styled } from "../stitches.config"

// Lint error on button: The type of this node cannot be serialized because its property '[$$PropertyValue]' cannot be serialized.ts(4118)

export const Button = styled('button', {
  backgroundColor: '$gray',
  color: '$mauve',
})

使用 import { styled } from "@stitches/react" 代替删除 lint 错误，但我不能使用在stitches.config 中定义的自定义样式

任何有关此错误含义的帮助或信息将不胜感激。谢谢

【问题讨论】：

标签： reactjs typescript next.js styled-components stitches

【解决方案1】：

ui-stitches 和 typescript 4.8 目前存在问题。降级到 4.7

https://github.com/stitchesjs/stitches/issues/1078

【讨论】：