樣式設定

用於配置熱門樣式工具的基本附加元件

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 的選項
🎨 提供主題
🔄 當提供多個主題時，在多個主題之間切換
❗️ 通過參數在元件和 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
  },
};