加入直播:周四,美国东部时间上午 11 点,Storybook 9 发布 & AMA

样式

一个用于配置常用样式工具的基础插件

在 Github 上查看

⚠️ 此插件已正式废弃 ⚠️

自发布以来,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。

我添加了一个迁移指南来帮助你迁移到新插件。如果你有任何疑问,请随时在 TwitterStorybook Discord 的支持频道上与我联系。

祝好,Shaun Evening


@storybook/addon-styling

使用常用样式工具在 Storybook 7 中更快地入门。

使用 Storybook 6?请查看release-0-3 分支

Toggling between themes

✨ 特性

  • 🤖 通过 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"
  ],
};

👇 工具特定配置

关于特定工具的设置,请查看以下方案

没有看到你喜欢的工具?别担心!这并不意味着这个插件不适合你。请查看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 并启动 Storybook
  • yarn build 构建和打包你的插件代码

🌲 分支结构

  • next - npm 上的 next 版本,也是主要开发分支
  • main - npm 上的 latest 版本,以及大多数用户使用的稳定版本

🚀 发布流程

  1. 所有 PR 都应该针对 next 分支,该分支依赖于 Storybook 的 next 版本。
  2. 合并后,该包的新版本将在 next NPM 标签上发布。
  3. 如果更改包含需要回补到稳定版本的 bugfix,请在 PR 描述中注明。
  4. 标有 pick 标签的 PR 将被挑选回 main 分支,并在 latest npm 标签上生成一个版本。
制作团队
  • thafryer
    thafryer
  • shaunlloyd
    shaunlloyd
  • kylegach
    kylegach
  • tooppaaa
    tooppaaa
  • ndelangen
    ndelangen
  • shilman
    shilman
兼容
    Angular
    Ember
    HTML
    Preact
    React
    React Native
    Svelte
    Vue
    Web Components
标签