💅

Storybook上でmuiのカスタムThemeがうまくいかない時の解決策

2021/11/07に公開

こんにちは、nullです!
株式会社オーリスという創業4年目のベンチャー企業で主にフロントエンドエンジニアをしています。
オーリスHP


経緯

アルファバージョンのmuiとStorybookの新機能に惹かれて試しに触ってることに。
いつも通りcreateThemeで設定したところ、paletteカラーとかが反映されてなくてめちゃくちゃ悩みました。

検証環境

npmパッケージそれぞれのバージョンはこちら
react: 17.0.2
@material-ui/core: 5.0.0-alpha.53
@mui/material: 5.0.6
@mui/styles: 5.0.2
@storybook/react: 6.4.0-beta.23

TL;DR

githubのIssueでうまくいった方がいました!リンク
ただ、現状まだIssueはopen状態なので解決してないみたいです。

.storybook/main.js
module.exports = {
  // ...
  webpackFinal: async (config) => {
    // ...
    delete config.resolve.alias['emotion-theming'];
    delete config.resolve.alias['@emotion/styled'];
    delete config.resolve.alias['@emotion/core'];
    return config;
  },
};

私はオーリスで技術委員会に参加しててたまにこういった記事を書いたり、twitterアカウントで気になった記事をツイートしたりしてるのでよろしければフォローお願いします!

最後に余談なんですが、オーリスでは体育館借りてみんなで運動したり、急に仕事終わりに焼肉を食べにいったりとめちゃくちゃ楽しい雰囲気で仕事ができる環境です!

唐突に開かれる焼肉会

焼肉会のはじまり

楽しかった✌️

Discussion