IT技术 - 无法从 Twin.macro 中的 Prop 获取值 - 吾爱随笔录

你可以在这里看到我正在尝试做的一个例子： https ://codesandbox.io/s/vibrant-leaf-qj8vz

注意：这个特殊的例子是使用带有样式组件的Twin.macro 。在我的本地计算机上，我使用 Twin.macro 和 Emotion/next.js 尝试了相同的结果。

这是一个示例组件，说明了我正在尝试做的事情：

import React from 'react'
import tw from 'twin.macro'

const Acme = ({ children, type }) => <div css={[tw`${type}`]}>{children}</div>

export default Acme

以下是我将如何使用该组件： <Acme type="text-2xl">Text Goes Here</Acme>

我的期望是我将能够通过我传递给props<Acme />的顺风 css 类来设置组件的这个实例的样式。type相反，我收到以下错误消息：

/src/components/Acme.js: twin.macro: Property value expected type of string but got null Learn more: https://www.npmjs.com/package/twin.macro

当试图弄清楚这一点时，我注意到一些有趣的可能相关的东西。以下是有效的代码变体：

const Acme = ({ children, type }) => {
  const typeClass = 'text-2xl'
  const typeObj = {
    class: 'text-2xl',
  }

  return <div css={[tw`${typeClass}`]}>{children}</div>
}

export default Acme

请注意，我创建了一个变量typeClass并将其设置为相同的顺风 css 类。请特别注意以下代码行：

css={[tw`${typeClass}`]}

我已经用type变量替换了propstypeClass。这行得通。但是现在，typeClass我们不使用变量，而是使用我创建的对象typeObj，如下所示：

const Acme = ({ children, type }) => {
  const typeClass = 'text-2xl'
  const typeObj = {
    class: 'text-2xl',
  }

  return <div css={[tw`${typeObj.class}`]}>{children}</div>
}

export default Acme

这不起作用并产生相同的错误：

/src/components/Acme.js: twin.macro: Property value expected type of string but got null Learn more: https://www.npmjs.com/package/twin.macro

即使typeClass === typeObj.class评估为也是如此true。

我不知道这是否有帮助，但也许它可以帮助指出解决方案。如果我能让typeprops表现得像typeClass变量一样，那么希望这会起作用。

无论哪种方式，知道为什么这不起作用以及如何解决它？

谢谢。