⚠️ 此插件已正式废弃 ⚠️
自发布以来,addon-styling 一直是配置 Storybook 样式的好方法。然而,随着插件的快速发展,很明显它试图做太多事情。它试图成为一个配置工具、一个主题工具,并且还包含大量的代码修改。这使得维护变得困难,并增加了大多数用户不需要的许多依赖项。
为了解决这个问题,我将该插件拆分为两个独立的插件:@storybook/addon-styling-webpack
和 @storybook/addon-themes
。这些插件更加专注,将使我们能够更快地迭代它们。
@storybook/addon-styling-webpack
将专门用于使用 Tailwind, Post CSS, SCSS, Less 和 Vanilla-extract 等常用工具配置你的基于 Webpack 的 Storybook。
@storybook/addon-themes
将专注于在 Storybook 中提供并在多个主题之间切换,无论你使用何种构建工具。
我还将 codemods 移到了一个单独的包中,这样就可以通过 npx
/ yarn dlx
/ pnpm dlx
来使用它们,而无需在你的 node_modules
中保留一个庞大的 codemod。
我添加了一个迁移指南来帮助你迁移到新插件。如果你有任何疑问,请随时在 Twitter 或 Storybook Discord 的支持频道上与我联系。
祝好,Shaun Evening
@storybook/addon-styling
使用常用样式工具在 Storybook 7 中更快地入门。
使用 Storybook 6?请查看release-0-3
分支
✨ 特性
- 🤖 通过 codemods 为常用工具提供零配置。了解更多。
- 🧩 常用工具的配置模板
- ⚡️ 用于 css modules, postCss, Sass 和 Less 的选项
- 🎨 提供主题
- 🔄 提供多个主题时,可在它们之间切换
- ❗️ 通过参数在组件和 Story 级别覆盖主题
🏁 开始使用
首先,安装此包作为开发依赖项
yarn
yarn add -D @storybook/addon-styling
npm
npm install -D @storybook/addon-styling
pnpm
pnpm add -D @storybook/addon-styling
然后,在你的 .storybook/main.js
文件中引入该插件
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-essentials",
+ "@storybook/addon-styling"
],
};
👇 工具特定配置
关于特定工具的设置,请查看以下方案
@emotion/styled
@mui/material
bootstrap
cssModules
less
postcss
sass
styled-components
tailwind
vuetify@3.x
没有看到你喜欢的工具?别担心!这并不意味着这个插件不适合你。请查看api 参考文档中的“编写自定义装饰器”章节。
❗️ 覆盖主题
如果你想为特定的组件或 Story 覆盖主题,可以使用 theming.themeOverride
参数。
import React from "react";
import { Button } from "./Button";
export default {
title: "Example/Button",
component: Button,
parameters: {
theming: {
themeOverride: "light", // component level override
},
},
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: "Button",
};
export const PrimaryDark = Template.bind({});
PrimaryDark.args = {
primary: true,
label: "Button",
};
PrimaryDark.parameters = {
theming: {
themeOverride: "dark", // Story level override
},
};
🤝 贡献
如果你想为这个插件贡献力量,非常感谢你,我非常乐意接受你的帮助 🙏
📝 开发脚本
yarn start
在监听模式下运行 babel 并启动 Storybookyarn build
构建和打包你的插件代码
🌲 分支结构
- next - npm 上的
next
版本,也是主要开发分支 - main - npm 上的
latest
版本,以及大多数用户使用的稳定版本
🚀 发布流程
- 所有 PR 都应该针对
next
分支,该分支依赖于 Storybook 的next
版本。 - 合并后,该包的新版本将在
next
NPM 标签上发布。 - 如果更改包含需要回补到稳定版本的 bugfix,请在 PR 描述中注明。
- 标有
pick
标签的 PR 将被挑选回main
分支,并在latest
npm 标签上生成一个版本。