85,947
返回整合
styled-components

整合Styled Components與 Storybook 整合

Styled Components 是一個 css-in-js 框架，用於構建快速且功能完善的元件。
先決條件

這個食譜假設您有一個使用 styled-components 的 React 應用程式，並且已經使用入門指南設定了 Storybook >= 7.0。 還沒有設定嗎？ 請按照 styled-components 的安裝說明進行操作，然後執行

# Add Storybook:
npm create storybook@latest

1. 新增 @storybook/addon-themes

執行以下腳本以安裝並註冊附加元件

npx storybook@latest add @storybook/addon-themes

這將執行一個配置腳本，引導您完成附加元件的設定。 提示時，從配置選項中選擇 styled-components。

配置腳本失敗了嗎？

實際上，這會執行 npx @storybook/auto-config themes，它應該讀取您的專案並嘗試使用正確的裝飾器配置您的 Storybook。 如果直接執行該命令無法解決您的問題，請在 @storybook/auto-config 儲存庫上提交錯誤報告，以便我們進一步改進它。 若要手動新增此附加元件，請先安裝它，然後將其新增至 .storybook/main.ts 中的 addons 陣列。

2. 提供 GlobalStyles

在 .storybook/preview.js 中，建立一個包含 font-family 的 <GlobalStyles /> 元件。 然後透過將其新增到 decorators 陣列，使用 withThemeFromJSXProvider 裝飾器將其應用於您的 stories。

// .storybook/preview.jsx
 
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { createGlobalStyle } from 'styled-components';
 
const GlobalStyles = createGlobalStyle`
  body {
    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
`;
 
export const decorators = [
  withThemeFromJSXProvider({
    GlobalStyles, // Adds your GlobalStyle component to all stories
  }),
];

如果您的應用程式中已經有 <GlobalStyles />，您可以將其匯入到 .storybook/preview.js 中，而不是重新建立。

3. 提供您的主題

若要與 Storybook 中的元件分享您的主題，您需要將它們與 styled-components 的 <ThemeProvider /> 元件一起提供給 withThemeFromJSXProvider 裝飾器。

// .storybook/preview.jsx
 
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 
import { lightTheme, darkTheme } from '../src/themes';
 
/* snipped for brevity */
 
export const decorators = [
  withThemeFromJSXProvider({
  themes: {
    light: lightTheme,
    dark: darkTheme,
  }
  defaultTheme: 'light',
  Provider: ThemeProvider,
  GlobalStyles,
})];

當您提供多個主題時，Storybook UI 中會出現一個工具列選單，讓您為您的 stories 選擇所需的主題。

參與貢獻

現在您已準備好將 styled-components 與 Storybook 一起使用了！ 🎉

如果您在工作中使用 styled-components，我們很希望您能協助讓這個設定更加容易。 加入 Discord 中的維護者以參與貢獻，或跳至附加元件文件。

標籤
貢獻者
  • ShaunEvening
    ShaunEvening