道具、TailwindCSS 和 Twin.Macro

Posted 2023-03-07

【中文标题】道具、TailwindCSS 和 Twin.Macro

【英文标题】：Props, TailwindCSS & Twin.Macro

【发布时间】：2021-04-18 01:51:02

【问题描述】：

我正在尝试让以下组件与Twin.Macro 一起正常工作：

import "twin.macro";

const Pattern = ( classes ) => 
  return (
    <div css=[classes.wrapper]>
      <img
        src="..."
        css=[classes.img]
      />
    </div>
  );
;

换句话说，我想通过classes 道具接收道具并将值传递给 Twin.Macro。但是，它无法正常工作。例如，这是该组件的一个实现：

<Pattern
  classes=
    wrapper: "absolute -left-2 z-10 lg:left-0 top-0 h-full bg-contain bg-line-left-md lg:bg-line-left bg-no-repeat xl:bg-line-left-md hidden sm:block",
    img: "h-full",
  
/>

这是输出的css：

.css-w36jn9-Pattern 
    absolute -left-2 z-10 lg: left-0 top-0 h-full bg-contain bg-line-left-md lg:bg-line-left bg-no-repeat xl:bg-line-left-md hidden sm:block;

如您所见，它所做的只是传递顺风 css 类的值。它不会处理正确的属性值对中的那些类（例如位置：绝对；左：-2px 等）。

我尝试了不同的方法来让它发挥作用，但都没有成功。知道我做错了什么以及如何解决吗？

谢谢。

【参考方案1】：

根据Twin.Macro 传递css 属性时，您需要使用tagged template literals 将您的类传递给tw 函数。假设您要传递一个变量，也可以使用字符串插值。

最后，您的代码应如下所示：

import tw from "twin.macro";

const Pattern = ( classes ) => 
  return (
    <div css=[tw`$classes.wrapper`]>
      <img
        src="..."
        css=[tw`$classes.img`]
      />
    </div>
  );
;

【讨论】：

我也试过了。当我这样做时，我收到以下消息：TypeError: PATH__TO__FILE: twin.macro: Property value expected type of string but got null Learn more: https://www.npmjs.com/package/twin.macro at Array.forEach (<anonymous>)。有什么想法吗？

我创建了一个新问题来处理我之前回答中提到的问题。如果可以，请随时在这里查看：***.com/questions/65700495/…