Zenn
🥰

【ガチ初心者】Storybookの背景色の変更方法【超ワンポイント】(Storybook-React Native-Typescript)

2022/01/27に公開
React Native
Storybook
tech

Storybookでの背景色を変更したい😊

今回のゴール

実際にやってみよう💆

React NativeでStorybookを扱いたい場合には、下記を一度ターミナルで実行すると思います！

ターミナル
npx -p @storybook/cli sb init --type react_native

そうするとディレクトリに下記が追加されます！

追加されるフォルダ
プロジェクト/
├ .storybook
|   ├ main.js
|   └ preview.js
...

次に、背景色を変更するアドオンを追加します！

ターミナル
npm i -D @storybook/addon-backgrounds

（※開発環境でしか使わないので「-D」をつけています😎）

それが完了したら、 .storybook の中身を変更していきましょう🙋

main.js
module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
	~ 略 ~ 
+    "@storybook/addon-backgrounds",
  ],
  framework: "@storybook/react",
};
preview.js
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
+  backgrounds: {
+   default: "twitter",
+   values: [
+     {
+       name: "twitter",
+       value: "#00aced",
+     },
+     {
+       name: "facebook",
+       value: "#3b5998",
+     },
+   ],
+ },
};

色々調べたらできました😢
古い記事だと main.js の addons での記述が @storybook/addon-backgrounds/register になっているので、そこで苦戦しました🥲

以上です！

Discussion