📘
Storybookのプレビューエリアに自動的に入る余白をなくす
やりたいこと
Storybookのプレビューエリア（コンポーネントが表示される場所）では、デフォルトで上下左右にpaddingが設定された状態になっています。
見た目確認の都合上この余白が邪魔な場合もあるので、これをなくす設定をします。
方法
.storybook/preview.ts内で以下のように設定することで、コンポーネント表示エリアの全画面表示が可能になります。
尚、本記事の検証バージョンは7.4.6です。
.storybook/preview.ts
import type { Preview } from "@storybook/react";
const preview: Preview = {
// ...様々な設定...
// ↓↓↓全画面の設定
layout: "fullscreen",
},
};
export default preview;
そのほか設定できる値
fullscreenの他に2つ設定値があり、初期状態で余白がついているのは初期値がpaddedとなっているためです。
| centerd | fullscreen | padded |
|---|---|---|
| 中央揃えに表示 | 余白を無くして全画面で表示 | 初期値。上下左右に余白をつけて表示 |
preview.tsに記述することで全体共通の設定としていますが、コンポーネント個々のstoriesファイルに記述することで個別に変更することも可能です。
公式ドキュメント
今回の設定について、Storybook公式ドキュメントでは以下が該当ページにあたります。
Discussion