无法从 Twin.macro 中的 Prop 获取值 [英] Cannot Get Values from Prop in Twin.macro

问题描述

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

You can see an example of what I am trying to do here: https://codesandbox.io/s/vibrant-leaf-qj8vz

注意:这个特定的例子是使用 Twin.macro 和样式化组件.在我的本地计算机上，我使用带有情感/next.js 的 Twin.macro 尝试了同样的事情并获得了相同的结果.

Note: this particular example is using Twin.macro with Styled Components. On my local computer I tried the same thing with the same results using Twin.macro with emotion/next.js.

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

Here is a sample component illustrating what I am trying to do:

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>

Here is how I would use that component: <Acme type="text-2xl">Text Goes Here</Acme>

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

My expectation is that I will be able to style this instance of the <Acme /> component via the tailwind css classes that I pass into the type prop. Instead, I get the following error message:

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

在尝试解决这个问题时，我注意到一些可能相关的有趣内容.这是有效的代码变体:

When trying to figure this out, I noticed something interesting that may be relevant. Here is a variation of the code that does work:

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 类.请特别注意以下代码行:

Note that I have created a variable typeClass and set it to the same tailwind css class. Note, in particular, the following line of code:

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

我已经用变量 typeClass 替换了道具 type.这有效.但是现在，我们不再使用变量 typeClass，而是使用我创建的对象 typeObj，如下所示:

I have replace the prop type with the variable typeClass. This works. But now, instead of using the variable typeClass let's use the object typeObj that I have created as follows:

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 也是如此.

This is so even though typeClass === typeObj.class evaluates to true.

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

I don't know if this is helpful, but perhaps it can help indicate a solution. If I can get the type prop to behave like the typeClass variable then hopefully this would work.

无论如何，知道为什么这不起作用以及如何解决它吗?

Either way, any idea why this is not working and how to fix it?

谢谢.

推荐答案

我找到了答案(意思是其他人在其他网站上回答了这个问题).这是.我必须将组件和组件的用法都重写如下:

I found the answer (meaning that someone else answered it on a different site). Here is is. I have to rewrite both the Component and the usage of the component as follows:

// Acme.js
const Acme = ({ children, type }) => <div css={[type]}>{children}</div>

---

// App.js
import tw from "twin.macro"

<Acme type={tw`text-2xl`}>Text Goes Here</Acme>

我已经试过了，效果很好.

I have tried this out and it works.

这篇关于无法从 Twin.macro 中的 Prop 获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！