Storybookのデフォルトのpaddingをなくす

はじめに

Storybook初心者である自分ための備忘録。

package.json

  ...
  "devDependencies": {
    ...
    "@storybook/react": "6.2.1",
    "@storybook/addon-a11y": "6.4.22",
    "@storybook/addon-essentials": "6.4.22",
    "@storybook/builder-webpack5": "6.4.22",
    "@storybook/manager-webpack5": "6.4.22",
    ...
  }
  ...

問題

Storybookでは、デフォルトでpaddingが1rem適用されてしまう。

marginは0なのだが、paddingは上下左右に1remと指定されている。
デフォルトのpaddingが気になる人も多いはず...。

解決

.storybook/preview.jsに下記を記述することで、このpaddingをなくすことが可能。

preview.js

export const parameters = { layout: 'fullscreen' };

Storybookの公式ドキュメントには、layoutパラメータは3種類あると説明されている。

layout accepts these options:
centered: center the component horizontally and vertically in the Canvas
fullscreen: allow the component to expand to the full width and height of the Canvas
padded: (default) Add extra padding around the component

layout: 'padded'がデフォルトで、コンポーネントの周りに1remのpaddingを付与する。
layout: 'centered'はコンポーネントを中央に配置する。
layout: 'fullscreen'が今回paddingをなくすために指定するもので、コンポーネントをキャンバスの幅と高さいっぱいに配置できるようにする。

コンポーネント単位や、さらに細かくストーリー単位でもlayoutパラメータを指定することが可能。

参考文献は以下のissue。