Pigment CSS 包装器

Question

我正在尝试围绕

styled

中的

@pigment-css/react

函数创建包装函数。

我不会打扰你关于我的包装器的细节，所以我将提供最简单的包装器，只是为了演示。

所以这是代码：

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

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

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

因此，当尝试将

Root

渲染为 React 组件时，我收到以下错误。这是Vite环境的截图，但在Next.JS中也发生了这种情况。

Answer 1

由于 Pigment CSS 作为静态提取器工作，它无法完全像运行时 css-in-js 库一样工作，因此您不应该包装

styled

，但您可以通过其他方式做到这一点：

选项1

import * as React from 'react';
import { styled } from '@pigment-css/react';
import type { ThemeArgs } from '@pigment-css/react/theme';

// Create shared styles dynamically
const getBaseStyles = ({ theme: { vars } }: ThemeArgs) => ({
    color: vars.palette.foreground,
    backgroundColor: vars.palette.background,
})

const Root = styled('div')(props => ({
    // Apply shared styles
    ...getBaseStyles(props),

    // Apply custom styles
    margin: "auto",
    maxWidth: "36rem",
}))

const Typography = styled('span')(props => ({
    // Apply shared styles
    ...getBaseStyles(props),

    // Apply custom styles
    fontWeight: 600,
}))

export default function PigmentCSSV1() {
    return (
        <>
            <Root as="div">Hello, div!</Root>
            <Root as="section">Hello, section!</Root>
            <Typography as="p">Hello, p!</Typography>
            <Typography as="span">Hello, span!</Typography>
        </>
    )
}

选项2

此外，Pigment CSS 允许您通过在样式组件上传递

as="div"

属性来覆盖渲染时间上的标签/组件，例如：

<Root as="div">Hello, div!</Root>
<Root as="section">Hello, section!</Root>
<Typography as="p">Hello, p!</Typography>
<Typography as="span">Hello, span!</Typography>

将呈现给：

因此，您可以创建一个样式组件，然后对其进行自定义：

import * as React from 'react';
import { styled } from '@pigment-css/react';

// Create base styled component and pass base tag that will be overridden on render time
const BaseComponent = styled('div')(({ theme: { vars } }) => ({
    color: vars.palette.foreground,
    backgroundColor: vars.palette.background,
}))

const Root = styled(BaseComponent)(props => ({
    // Apply custom styles
    margin: "auto",
    maxWidth: "36rem",
}))

const Typography = styled(BaseComponent)(props => ({
    // Apply custom styles
    fontWeight: 600,
}))

export default function PigmentCSSV2() {
    return (
        <>
            <Root as="div">Hello, div!</Root>
            <Root as="section">Hello, section!</Root>
            <Typography as="p">Hello, p!</Typography>
            <Typography as="span">Hello, span!</Typography>
        </>
    )
}

选项3

Pigment CSS 有一个很棒的

css

功能，可能会对你有所帮助。使用此功能，您可以创建单独的样式，然后将其添加到任何组件。

import * as React from 'react';
import { styled, css } from '@pigment-css/react';

// Create base styled component and pass base tag that will be overridden on render time
const baseStyleClass = css(({ theme: { vars } }) => ({
    color: vars.palette.foreground,
    backgroundColor: vars.palette.background,
}))

const Root = styled('div')(props => ({
    // Apply custom styles
    margin: "auto",
    maxWidth: "36rem",
}))

const Typography = styled('span')(props => ({
    // Apply custom styles
    fontWeight: 600,
}))

export default function PigmentCSSV3() {
    return (
        <>
            <Root as="div" className={baseStyleClass}>Hello, div!</Root>
            <Root as="section" className={baseStyleClass}>Hello, section!</Root>
            <Typography as="p" className={baseStyleClass}>Hello, p!</Typography>
            <Typography as="span" className={baseStyleClass}>Hello, span!</Typography>
        </>
    )
}