使用样式化组件对声明的函数进行样式化

Question

我正在尝试使用顺风样式的组件来设计一个函数，它一直抛出函数已经定义的错误。由于我使用的是NextJS，所以我声明了一个函数，该函数在Assets文件夹中的索引文件中呈现我的徽标。

import Image from next/image

export const Logo = () => {
        return <Image src={logo} alt='Logo' />
    }

我想要的是，在不同的页面上呈现徽标时，要以不同的方式来设计它。这更适用于图像的尺寸和可能的不透明度。这就是我要做的

const Logo = tw.img`
    h-28
`

此方法引发“解析错误:标识符'UberLogo‘已经声明”错误。我怎么才能解决这个问题？

Answer 1

您将希望将该函数传递到下面的括号中

const StyledLogo = tw(Logo)`
  h-28
`

这样做之后，StyledLogo将是一个样式化的Logo()常量，可以像原始函数一样使用，只是样式化。