Storybookのグローバルデコレーターの使用方法

グローバルデコレーターの設定方法 Storybookでグローバルデコレーターを使用するには、.storybook/preview.jsファイルを作成します。このファイルにグローバルデコレーターの設定を記述します。

import { addDecorator } from '@storybook/react';
import { withGlobalDecorator } from 'your-global-decorator-package';
addDecorator(withGlobalDecorator);

上記の例では、your-global-decorator-packageは、実際に使用するグローバルデコレーターのパッケージ名に置き換えてください。

グローバルデコレーターの効果を確認するためのコード例以下の例では、グローバルデコレーターを使用して全てのストーリーに背景色を適用しています。

import React from 'react';
export default {
  title: 'Button',
  component: Button,
};
export const Primary = () => <Button>Primary Button</Button>;
Primary.decorators = [
  (Story) => (
    <div style={{ backgroundColor: 'lightblue' }}>
      <Story />
    </div>
  ),
];

上記の例では、Primaryストーリーに対してグローバルデコレーターを適用しています。背景色が'lightblue'に設定され、Primaryボタンがこの背景色でレンダリングされます。

以上がStorybookのグローバルデコレーターの使用方法とコード例です。これを使用することで、一貫したデザインや動作を全てのストーリーに適用することができます。