问题描述
我有以下故事书组件:
import {storiesOf} from "@storybook/react"
import * as React from "react"
import styled from "@emotion/styled"
import tw from "@tailwindcssinjs/macro"
const Button = styled.button(tw`
relative
w-64 min-w-full
`)
const ButtonStyled = ({children}) => <Button>{children}</Button>
storiesOf("Button",module).add("with text",() => (
<ButtonStyled>this is a button </ButtonStyled>
))
没有styled
版本,并直接将css类嵌入className
中。当我介绍styled
版本时,会出现以下错误:
尽管存在node_module软件包,但似乎找不到它。
解决方法
如果您想将Tailwind与Emotion结合使用,现在可以使用Twin macros
。
您可以首先查看以下示例:
https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion
完成安装后,请在项目根目录中运行以下命令:
npx sb init
它将以理想的设置为您安装Storybook。
完成此操作后,您将拥有一本随时可用的情感驱动的故事书。