带有尾风和情感设置的故事书

编程问答 2022-08-16

问题描述

我有以下故事书组件：

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版本时，会出现以下错误：

enter image description here

尽管存在node_module软件包，但似乎找不到它。

解决方法

如果您想将Tailwind与Emotion结合使用，现在可以使用Twin macros。

您可以首先查看以下示例：

https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion

完成安装后，请在项目根目录中运行以下命令：

npx sb init

它将以理想的设置为您安装Storybook。

完成此操作后，您将拥有一本随时可用的情感驱动的故事书。

emotionjavascriptstorybooktailwind-css