道具、TailwindCSS 和 Twin.Macro

Question

我正在尝试让以下组件与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 等）。

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

谢谢。

Answer 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>
  );
};