Storybookで自動的に入る余白をなくす

やりたいこと

初期状態ではコンポーネント表示エリアにpadding: 16pxの余白ができているので、これをなくします。

方法

.storybook/preview.ts ファイルで以下のように設定することで、コンポーネント表示エリアの全画面表示が可能になります。

.storybook/preview.ts

import type { Preview } from "@storybook/react";

const preview: Preview = {
    // ...様々な設定...
  
	// ↓↓↓全画面の設定
    layout: "fullscreen",
  },
};

export default preview;

fullscreenの他に2つ設定値があり、初期状態で余白がついているのは初期値がpaddedとなっているためです。

centerd	fullscreen	padded（初期値）
中央揃えに表示します	余白を無くして全画面で表示します	上下左右に余白をつけて表示します

.storybook/preview.tsに記述することで共通設定となりますが、個々のstoriesファイルでも設定が可能です。

検証バージョン・公式リファレンス

検証に使用したStorybookのバージョンは7.4.6です。

今回の対応に該当する公式ドキュメントは以下です。
https://storybook.js.org/docs/configure/story-layout