storybookでスペースを消す。

storybookのスペースを消す

TL;DR

storybookで開発していたら、横幅いっぱいに表示するコンポーネントを作成中、どうしてもpaddingが入ってしまった。
iframeのbodyにmarginとpaddingが設定されていたのでこれを0にした。
しかし、他のサイトだと!importantが設定されていないのでできなかった。
環境はreact+storybook です。

解決策

1. .storyboook/preview-head.htmlを追加
2. 下記の通り追記。

.storyboook/preview-head.html

<style type="text/css">
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
</style>

環境

環境はreact+storybook です。
バージョンは以下

pacage.json

//省略

  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.2"
  },
//省略
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@storybook/addon-actions": "^6.0.12",
    "@storybook/addon-essentials": "^6.0.12",
    "@storybook/addon-links": "^6.0.12",
    "@storybook/node-logger": "^6.0.12",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.0.12",
    "babel-loader": "^8.1.0",
    "react-is": "^16.13.1"
  }
//省略