封装@pigment-css/react的styled函数后渲染组件报错求助

架构老林

2026-6-26

问题：封装@pigment-css/react的styled函数后在Vite/Next.js中渲染报错

我尝试封装@pigment-css/react中的styled函数，最简代码如下：

import { styled } from "@pigment-css/react"

function myStyled(tag: "div" | "p" | "span") {
  return styled(tag)
}

const Root = myStyled("div")({
  margin: "auto",
  maxWidth: "36rem",
})

在Vite和Next.js环境中渲染Root组件时均出现错误。

原因分析

@pigment-css/react是编译时CSS-in-JS方案，它的styled函数依赖编译阶段的静态分析来提取样式、生成对应的CSS类名。直接简单封装styled(tag)会破坏编译器对styled调用的识别，导致无法正确处理样式的编译与注入，进而引发渲染错误。

解决方案

需要确保封装后的函数能被pigment-css的编译器正确识别，同时保留原styled函数的类型与功能。可以通过以下两种方式修复：

方式1：保留泛型与完整类型签名

import { styled } from "@pigment-css/react";

type ValidTags = "div" | "p" | "span";

function myStyled<T extends ValidTags>(tag: T) {
  return styled(tag);
}

const Root = myStyled("div")({
  margin: "auto",
  maxWidth: "36rem",
});

方式2：带自定义逻辑的高阶函数封装

如果需要添加自定义逻辑（比如默认样式），可通过嵌套函数传递参数，确保编译器仍能识别底层的styled调用：

import { styled } from "@pigment-css/react";

function myStyled(tag: "div" | "p" | "span") {
  return (styles: Record<string, string | number>) => {
    // 自定义逻辑：添加全局默认样式
    const defaultStyles = {
      boxSizing: "border-box",
    };
    return styled(tag)({...defaultStyles, ...styles});
  };
}

const Root = myStyled("div")({
  margin: "auto",
  maxWidth: "36rem",
});