零配置支持 Tailwind、MUI、styled-components 和 Emotion

将 Storybook 与您喜爱的样式工具一起设置，感觉就像组装宜家家具。说明书上说它们应该能拼在一起，但有时您需要灵光一闪才能弄清楚如何操作。

今天，我很高兴地分享，Storybook 官方的 styling-addon 现在为 JavaScript 最流行的样式库提供零配置支持，包括

• 💨 Tailwind
• 🧶 MaterialUI
• 💅 Styled Components
• 👩‍🎤 Emotion

请继续阅读，了解背景信息、使用指南以及我们未来的计划。

等等，但为什么？

世界领先的前端团队使用 Storybook 来开发、测试和记录 UI。滚动浏览我们的组件百科全书，查看来自外太空的 UI 示例。看看你，NASA。

然而，将工具集成到 Storybook 中的挑战可能会成为新用户入门的障碍。有些开发者甚至根本无法完成设置阶段。

在过去一年中，我们编写了教程和指南，用于将 Storybook 与 Tailwind、MUI、Styled Components 和 Vuetify 等工具连接。我们还发布了官方 Styling Addon，其中包含快速入门配置模板和主题支持。

尽管如此，这些解决方案仍然需要您进行一些设置。这种情况即将改变。

介绍自动配置代码修改器 (codemods)

我们新的代码修改器通过为您的项目的样式库自动配置 Storybook 来加速此过程。它们识别样式工具，设置配置，并使您能够更快地开始编写 Story。

在您的项目中使用代码修改器

1. 确保您正在使用 Storybook 7 和 @storybook/addon-styling (版本高于 1.1.0)
2. 在您的项目根目录中，运行 node node_modules/@storybook/addon-styling/bin/postinstall.js。
3. Storybook 将自行配置以与您的工具协同工作
4. ✅ 您可以确认结果

下一步是什么？

目前，样式代码修改器需要手动运行。在未来，我们的目标是让 Storybook 自动识别您的样式工具，并在您无需动任何手指的情况下配置一切。我们很高兴在未来几个月内分享更多信息。加入我们的 Discord 服务器 #contributing 加入我们的团队。

如果您在项目中运行这些代码修改器时遇到问题，请在 GitHub Issues 上提供反馈。