如何解决带有尾风和情感设置的故事书
我有以下故事书组件:
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。
完成此操作后,您将拥有一本随时可用的情感驱动的故事书。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。