84,593
返回整合
@emotion/styled

整合Emotion與 Storybook

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

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

# Add Storybook:
npx storybook@latest init

1. 新增 @storybook/addon-themes

首先，您需要安裝@storybook/addon-themes。

執行以下腳本來安裝並註冊這個擴充套件

npx storybook@latest add @storybook/addon-themes
組態腳本失敗了嗎？

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

2. 提供 GlobalStyles

在 .storybook/preview.js 內，建立一個包含 font-family 的 <GlobalStyles /> 元件。然後使用 withThemeFromJSXProvider 裝飾器將它套用到您的 Story，方法是將它新增到 decorators 陣列。

// .storybook/preview.jsx
 
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { Global, css } from '@emotion/react';
 
const GlobalStyles = () => (
  <Global
    styles={css`
      body {
        font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
    `}
  />
);
 
export const decorators = [
  withThemeFromJSXProvider({
    GlobalStyles, // Adds your GlobalStyles component to all stories
  }),
];

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

3. 提供您的主題

若要與 Storybook 中的元件分享您的主題，您需要將它們提供給 withThemeFromJSXProvider 裝飾器，以及 @emotion/styled 的 <ThemeProvider /> 元件。

// .storybook/preview.jsx
 
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { Global, css, ThemeProvider } from '@emotion/react';
 
import { lightTheme, darkTheme } from '../src/themes';
 
const GlobalStyles = () => (
  <Global
    styles={css`
      body {
        font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
    `}
  />
);
 
export const decorators = [
  withThemeFromJSXProvider({
  themes: {
    light: lightTheme,
    dark: darkTheme,
  }
  defaultTheme: 'light',
  Provider: ThemeProvider,
  GlobalStyles,
})];

現在，使用 Emotion 製作的元件將會透過 theme 屬性取得主題，以及從 <Global /> 繼承的樣式。

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

Completed Emotion example with theme switcher

參與貢獻

現在您已準備好在 Storybook 中使用 Emotion。 🎉

如果您在工作中使用 Emotion，我們很樂意得到您的幫助，讓這個設定變得更好。加入 Discord 中的維護人員以參與其中，或跳到擴充套件文件。

標籤
貢獻者
  • ShaunEvening
    ShaunEvening