样式

用于配置流行样式工具的基本插件

236k

每周下载次数

由 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 中的多个主题，无论您使用什么构建工具。

我还将代码修改移到了一个单独的包中，以便可以通过 npx/ yarn dlx / pnpm dlx 使用它们，而无需在您的 node_modules 中保留一个庞大的代码修改。

我添加了一个迁移指南，帮助您迁移到新的插件。如果您有任何问题，请随时在 Twitter 或 Storybook Discord 的支持频道中联系我。

祝一切顺利，Shaun Evening

`@storybook/addon-styling`

使用流行的样式工具，在 Storybook 7 中更快地入门。

使用 Storybook 6 吗？ 查看 release-0-3 分支

Toggling between themes

✨ 功能

🤖 通过代码修改为流行工具提供零配置。了解更多。
🧩 为流行工具提供配置模板
⚡️ 为 css 模块、postCss、Sass 和 Less 提供选项
🎨 提供主题
🔄 当提供多个主题时，在它们之间切换
❗️ 通过参数在组件和故事级别覆盖主题

🏁 入门

要开始，请将包 **安装** 为开发依赖项

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 参考。

❗️ 覆盖主题

如果您想为特定组件或故事覆盖主题，可以使用 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
  },
};