样式

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

208k

每周下载量

Storybook 制作

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

自发布以来，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 分支

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
  },
};