Storybook เป็นห้องสมุด UI ที่สามารถใช้เพื่อบันทึกส่วนประกอบซึ่งเป็นที่นิยมในพื้นที่ส่วนหน้ามาระยะหนึ่งแล้ว ส่วนใหญ่เราอาจต้องปรับแต่ง Storybook ของเราให้ตรงกับแบรนด์ของลูกค้า บล็อกนี้พูดถึงวิธีปรับแต่งหนังสือนิทานของคุณ

ฉันจะเริ่มต้นด้วยการกำหนดโดยตรงโดยสมมติว่าคุณสร้างเรื่องราวของคุณ หากคุณยังใหม่กับหนังสือนิทาน โปรดไปที่ลิงก์ด้านล่างเพื่ออ่านเพิ่มเติมเกี่ยวกับวิธีการเขียนนิทาน

ขั้นตอนแรกคือตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง@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