为 Tailwind、MUI、styled-components 和 Emotion 提供零配置支持
JavaScript 最流行的样式库新增零配置支持
使用你喜欢的样式工具设置 Storybook 感觉就像组装宜家家具一样。说明书上说组件应该能配合得很好，但有时你需要一点灵感才能弄清楚如何操作。
今天，我很高兴地分享，Storybook 官方的 styling-addon 现已支持 JavaScript 最流行的样式库的零配置，包括
继续阅读以了解背景信息、使用指南以及我们未来的计划。
等等，为什么？
世界领先的前端团队使用 Storybook 来开发、测试和记录 UI。滚动查看我们的组件百科全书，可以看到一些令人惊叹的 UI 示例。比如，NASA 的那个。
然而，将工具集成到 Storybook 中的挑战可能会成为新用户入门的障碍。有些开发者甚至无法通过设置阶段。
在过去的一年里，我们编写了关于如何将 Storybook 与 Tailwind、MUI、Styled Components 和 Vuetify 等工具连接的指南和教程。我们还发布了官方 Styling Addon，它提供了快速启动配置模板和主题支持。
尽管如此，这些解决方案仍然需要你进行一些设置。这种情况即将改变。
介绍自动配置 Codemods
我们的新 Codemods 通过自动配置 Storybook 以适应你项目的样式库，加快了这一进程。它们识别样式工具，设置配置，让你更快地开始编写故事。
在你的项目中运行 Codemods
- 确保你正在使用Storybook 7 和 @storybook/addon-styling（版本高于 1.1.0）
- 在项目根目录下运行
node node_modules/@storybook/addon-styling/bin/postinstall.js。 - Storybook 将自行配置以与你的工具协同工作
- ✅ 你可以确认结果
下一步是什么？
目前，样式 Codemods 需要手动运行。未来，我们的目标是让 Storybook 自动识别你的样式工具并自动配置一切，无需你动手。我们很高兴在接下来的几个月里分享更多信息。加入我们的 Discord 服务器 #contributing 来加入我们的团队。
如果在你的项目中运行这些 Codemods 时遇到问题，请在 GitHub Issues 提供反馈。