💅

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

2021/11/07に公開

経緯

アルファバージョンの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;
  },
};

Discussion