道具、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 when passing css property, you need to pass your classes to tw function using tagged template literals。假设您要传递一个变量，也可以使用字符串插值。

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

import tw from "twin.macro";

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

道具、TailwindCSS 和 Twin.Macro

Props, TailwindCSS & Twin.Macro

emotion

reactjs

styled-components

tailwind-css