Storybook là một thư viện giao diện người dùng có thể được sử dụng để ghi lại các thành phần phổ biến trong khu vực giao diện người dùng trong một thời gian khá dài. Hầu hết, chúng tôi có thể phải tùy chỉnh cuốn truyện của mình để phù hợp với thương hiệu của khách hàng. Blog này nói về cách tùy chỉnh cuốn truyện của bạn.

Tôi sẽ bắt đầu với chủ đề trực tiếp giả sử bạn đã tạo câu chuyện của mình. Bạn nào chưa quen với truyện thì vào link bên dưới để đọc thêm về cách viết truyện nhé.

Bước đầu tiên là đảm bảo rằng bạn đã cài đặt @storybook/addonsvà @storybook/themingcác gói. Chạy lệnh dưới đây nếu bạn chưa có.

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

Ví dụ: chúng ta hãy thử thay đổi chủ đề sách truyện thành tối (Sách truyện luôn có chủ đề sáng theo mặc định).

Thêm manager.jstệp vào .storybookthư mục.

// .storybook/manager.js

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

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

Bây giờ hãy thêm nhiều phong cách hơn.

Hãy tạo một tệp có tên là myTheme.jsin .storybookvà thêm tất cả các kiểu của chúng ta vào đó.

// .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,
});

Đó là tất cả. Bạn sẽ tìm thấy liên kết đến kho lưu trữ git tại đây .

Người giới thiệu:

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