Storybook은 꽤 오랫동안 프런트 엔드 영역에서 인기 있는 구성 요소를 문서화하는 데 사용할 수 있는 UI 라이브러리입니다. 대부분의 경우 클라이언트의 브랜딩과 일치하도록 스토리북을 사용자 지정해야 할 수 있습니다. 이 블로그에서는 스토리북을 사용자 지정하는 방법에 대해 설명합니다.

나는 당신이 당신의 이야기를 만들었다고 가정하고 테마 설정부터 시작하겠습니다. 스토리북이 처음이라면 아래 링크로 이동하여 스토리 작성 방법에 대해 자세히 읽어보세요.

첫 번째 단계는 패키지 @storybook/addons를 설치했는지 확인하는 것 입니다. @storybook/theming실행하지 않은 경우 아래 명령을 실행하십시오.

yarn add --dev @storybook/addons @storybook/theming

예를 들어 스토리북 테마를 어둡게 변경해 보겠습니다 (스토리북은 기본적으로 항상 밝은 테마를 가집니다).

폴더 에 manager.js파일을 추가 합니다..storybook

// .storybook/manager.js

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

이제 더 많은 스타일을 추가해 보겠습니다.

myTheme.js호출 되는 파일을 만들고 .storybook거기에 모든 스타일을 추가해 봅시다 .

// .storybook/YourTheme.js

import { create } from '@storybook/theming';

export default create({
  base: 'light',

  colorPrimary: 'white',
  colorSecondary: '#A4D87B',

  // UI
  appBg: 'white',
  appContentBg: '#E5ECE0',
  appBorderColor: 'grey',
  appBorderRadius: 6,

  // Typography
  fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',

  // Text colors
  textColor: 'black',
  textInverseColor: 'rgba(255,255,255,0.9)',

  // Toolbar default and active colors
  barTextColor: 'white',
  barSelectedColor: 'black',
  barBg: '#A4D87B',

  // Form colors
  inputBg: 'white',
  inputBorder: '#4B9611',
  inputTextColor: 'black',
  inputBorderRadius: 6,

  brandTitle: 'My custom storybook',
  brandUrl: 'https://example.com',
  brandImage: 'https://i.postimg.cc/pLp2tZjx/icons8-green-64.png',
  brandTarget: '_self',
});

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
import myTheme from './myTheme';

addons.setConfig({
  theme: myTheme,
});

그게 다야. 여기 에서 git 저장소에 대한 링크를 찾을 수 있습니다 .

참조:

1. https://storybook.js.org/docs/react/configure/theming