Support for Material UI Core 5.x

[markitecht]

We have dependencies on Core 5+ and would very much like to use this Add-on.

[aleccaputo]

Same here.

[urbanmarcen]

Same here.

[go-to-the-future]

Same here.

[d0whc3r]

Hi, I made a little patch to avoid errors, but it doesn't work as expected

Here is the patch (for the dist files)

diff --git a/node_modules/storybook-addon-material-ui/dist/.themes/index.js b/node_modules/storybook-addon-material-ui/dist/.themes/index.js
index 279c973..2f58f03 100644
--- a/node_modules/storybook-addon-material-ui/dist/.themes/index.js
+++ b/node_modules/storybook-addon-material-ui/dist/.themes/index.js
@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.lightTheme = void 0;
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
-var lightTheme = (0, _styles.createMuiTheme)({
+var lightTheme = (0, _styles.createTheme)({
   palette: {
     primary: {
       main: 'rgb(98, 126, 157)'
diff --git a/node_modules/storybook-addon-material-ui/dist/UI/FullTheme.js b/node_modules/storybook-addon-material-ui/dist/UI/FullTheme.js
index 17ad4c2..18ac26d 100644
--- a/node_modules/storybook-addon-material-ui/dist/UI/FullTheme.js
+++ b/node_modules/storybook-addon-material-ui/dist/UI/FullTheme.js
@@ -15,7 +15,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactInspector = require("react-inspector");
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,7 +47,7 @@ var _default = function _default(_ref) {
     expandLevel: 1,
     expandPaths: "$.palette",
     sortObjectKeys: sortObjectKeys,
-    data: (0, _styles.createMuiTheme)(theme)
+    data: (0, _styles.createTheme)(theme)
   }));
 };
 
diff --git a/node_modules/storybook-addon-material-ui/dist/UI/MuiDecorator.js b/node_modules/storybook-addon-material-ui/dist/UI/MuiDecorator.js
index ea790c0..eab4ed1 100644
--- a/node_modules/storybook-addon-material-ui/dist/UI/MuiDecorator.js
+++ b/node_modules/storybook-addon-material-ui/dist/UI/MuiDecorator.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 var _WithChannel = _interopRequireDefault(require("../adk/WithChannel"));
 
@@ -20,16 +20,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var currentTheme = function currentTheme(data) {
   try {
     var theme = data.themes[data.themeInd];
-    return (0, _styles.createMuiTheme)(theme);
+    return (0, _styles.createTheme)(theme);
   } catch (err) {
-    return (0, _styles.createMuiTheme)({});
+    return (0, _styles.createTheme)({});
   }
 };
 
 var MuiDecorator = function MuiDecorator(_ref) {
   var data = _ref.data,
       story = _ref.story;
-  return _react.default.createElement(_styles.MuiThemeProvider, {
+  return _react.default.createElement(_styles.ThemeProvider, {
     theme: currentTheme(data)
   }, _react.default.createElement("div", null, story));
 };
diff --git a/node_modules/storybook-addon-material-ui/dist/UI/Palette.js b/node_modules/storybook-addon-material-ui/dist/UI/Palette.js
index 998120f..6c26658 100644
--- a/node_modules/storybook-addon-material-ui/dist/UI/Palette.js
+++ b/node_modules/storybook-addon-material-ui/dist/UI/Palette.js
@@ -15,7 +15,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactInspector = require("react-inspector");
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 var _colorPicker = _interopRequireDefault(require("@usulpro/color-picker"));
 
@@ -169,7 +169,7 @@ function (_React$Component) {
 
         _this.setState({
           path: path,
-          editColor: (0, _styles.createMuiTheme)({
+          editColor: (0, _styles.createTheme)({
             palette: palette
           }).palette[path[0]][path[1]],
           isPickerOpen: isPickerOpen
@@ -282,10 +282,10 @@ function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _createMuiTheme = (0, _styles.createMuiTheme)({
+      var _createTheme = (0, _styles.createTheme)({
         palette: this.state.palette
       }),
-          palette = _createMuiTheme.palette;
+          palette = _createTheme.palette;
 
       var colorSet = function colorSet(name) {
         return _this2.renderColorSet(palette[name], name, _this2.state.palette.type === 'dark');
diff --git a/node_modules/storybook-addon-material-ui/dist/components/ThemePropBlock.js b/node_modules/storybook-addon-material-ui/dist/components/ThemePropBlock.js
index 692d08a..e5999bb 100644
--- a/node_modules/storybook-addon-material-ui/dist/components/ThemePropBlock.js
+++ b/node_modules/storybook-addon-material-ui/dist/components/ThemePropBlock.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 
 var _SclToggle = _interopRequireDefault(require("../material-desktop/SclToggle"));
 
diff --git a/node_modules/storybook-addon-material-ui/dist/components/ThemePropItem.js b/node_modules/storybook-addon-material-ui/dist/components/ThemePropItem.js
index c0973b5..8419768 100644
--- a/node_modules/storybook-addon-material-ui/dist/components/ThemePropItem.js
+++ b/node_modules/storybook-addon-material-ui/dist/components/ThemePropItem.js
@@ -9,11 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
 
-var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
 
-var _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));
+var _Slide = _interopRequireDefault(require("@mui/material/Slide"));
 
 var _colorPicker = _interopRequireDefault(require("@usulpro/color-picker"));
 
diff --git a/node_modules/storybook-addon-material-ui/dist/components/ThemeSideBar.js b/node_modules/storybook-addon-material-ui/dist/components/ThemeSideBar.js
index 38891d0..8bb291a 100644
--- a/node_modules/storybook-addon-material-ui/dist/components/ThemeSideBar.js
+++ b/node_modules/storybook-addon-material-ui/dist/components/ThemeSideBar.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 
 var _ContentCopy = _interopRequireDefault(require("@material-ui/icons/ContentCopy"));
 
diff --git a/node_modules/storybook-addon-material-ui/dist/containers/MuiTheme.js b/node_modules/storybook-addon-material-ui/dist/containers/MuiTheme.js
index 5c6a34e..0742ba4 100644
--- a/node_modules/storybook-addon-material-ui/dist/containers/MuiTheme.js
+++ b/node_modules/storybook-addon-material-ui/dist/containers/MuiTheme.js
@@ -9,15 +9,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
-var _createPalette = _interopRequireDefault(require("@material-ui/core/styles/createPalette"));
+var _createPalette = _interopRequireDefault(require("@mui/material/styles/createPalette"));
 
-var _purple = _interopRequireDefault(require("@material-ui/core/colors/purple"));
+var _purple = _interopRequireDefault(require("@mui/material/colors/purple"));
 
-var _green = _interopRequireDefault(require("@material-ui/core/colors/green"));
+var _green = _interopRequireDefault(require("@mui/material/colors/green"));
 
-var _red = _interopRequireDefault(require("@material-ui/core/colors/red"));
+var _red = _interopRequireDefault(require("@mui/material/colors/red"));
 
 var _config = require("../config");
 
@@ -80,9 +80,9 @@ function (_React$Component) {
 
     _this.state = props.initState;
     _this.state.themesAppliedList = props.themesAppliedListInit;
-    _this.state.currentTheme = {}; // this.state.muiTheme = createMuiTheme(props.themesAppliedListInit[props.initState.themeInd]); // Not working yet
+    _this.state.currentTheme = {}; // this.state.muiTheme = createTheme(props.themesAppliedListInit[props.initState.themeInd]); // Not working yet
 
-    _this.state.muiTheme = (0, _styles.createMuiTheme)();
+    _this.state.muiTheme = (0, _styles.createTheme)();
     _this.state.isMount = false;
     _this.isChannelData = false;
     _this.UpdateList = {};
@@ -149,8 +149,8 @@ function (_React$Component) {
     value: function changeTheme(ind) {
       this.needComponentUpdate('ThemeSideBar');
       this.setState({
-        // muiTheme: createMuiTheme(this.state.themesAppliedList[ind]),
-        muiTheme: (0, _styles.createMuiTheme)(),
+        // muiTheme: createTheme(this.state.themesAppliedList[ind]),
+        muiTheme: (0, _styles.createTheme)(),
         themeInd: ind
       });
     }
@@ -201,7 +201,7 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var theme = (0, _styles.createMuiTheme)(this.state.currentTheme);
+      var theme = (0, _styles.createTheme)(this.state.currentTheme);
       return _react.default.createElement(_styles.MuiThemeProvider, {
         theme: theme
       }, _react.default.createElement("div", null, this.props.story));
diff --git a/node_modules/storybook-addon-material-ui/dist/containers/PanelContainer.js b/node_modules/storybook-addon-material-ui/dist/containers/PanelContainer.js
index 14bcd96..cc2b3c5 100644
--- a/node_modules/storybook-addon-material-ui/dist/containers/PanelContainer.js
+++ b/node_modules/storybook-addon-material-ui/dist/containers/PanelContainer.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 var beauti = _interopRequireWildcard(require("js-beautify"));
 
@@ -49,7 +49,7 @@ var _global = global,
     document = _global.document,
     window = _global.window;
 var logger = console;
-var lightBaseTheme = (0, _styles.createMuiTheme)();
+var lightBaseTheme = (0, _styles.createTheme)();
 var PROGRESS_STATUS = {
   'button-clone': 'soon',
   // todo: [] button_clone
diff --git a/node_modules/storybook-addon-material-ui/dist/material-desktop/SclAvatar.js b/node_modules/storybook-addon-material-ui/dist/material-desktop/SclAvatar.js
index d7021bc..bd84e62 100644
--- a/node_modules/storybook-addon-material-ui/dist/material-desktop/SclAvatar.js
+++ b/node_modules/storybook-addon-material-ui/dist/material-desktop/SclAvatar.js
@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 
-var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
diff --git a/node_modules/storybook-addon-material-ui/dist/material-desktop/SclToggle.js b/node_modules/storybook-addon-material-ui/dist/material-desktop/SclToggle.js
index 1f20161..4606fa2 100644
--- a/node_modules/storybook-addon-material-ui/dist/material-desktop/SclToggle.js
+++ b/node_modules/storybook-addon-material-ui/dist/material-desktop/SclToggle.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
diff --git a/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgButton.js b/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgButton.js
index 29df50f..1db1f93 100644
--- a/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgButton.js
+++ b/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgButton.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
diff --git a/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgIcon.js b/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgIcon.js
index e62a287..eb3f21c 100644
--- a/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgIcon.js
+++ b/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgIcon.js
@@ -52,7 +52,7 @@ function (_React$Component) {
     _this = _possibleConstructorReturn(this, _getPrototypeOf(SvgIcon).call(this, props, context));
 
     require.ensure([], function (require) {
-      var Icon = require('@material-ui/core/SvgIcon');
+      var Icon = require('@mui/material/SvgIcon');
 
       _this.ActionHome = Icon.default;
     });
diff --git a/node_modules/storybook-addon-material-ui/dist/muiTheme.js b/node_modules/storybook-addon-material-ui/dist/muiTheme.js
index 8e4c718..201828e 100644
--- a/node_modules/storybook-addon-material-ui/dist/muiTheme.js
+++ b/node_modules/storybook-addon-material-ui/dist/muiTheme.js
@@ -7,7 +7,7 @@ exports.muiTheme = muiTheme;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 var _config = require("./config");
 
@@ -17,12 +17,12 @@ var _decorator = require("./adk/decorator");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var lightBaseTheme = (0, _styles.createMuiTheme)({
+var lightBaseTheme = (0, _styles.createTheme)({
   typography: {
     useNextVariants: true
   }
 });
-var darkBaseTheme = (0, _styles.createMuiTheme)({
+var darkBaseTheme = (0, _styles.createTheme)({
   palette: {
     type: 'dark'
   },

[Brodzko]

Seconded, is this being maintained? :)

[usulpro]

Hey guys! yep I'm maintaining this one and another one with more general use case - https://github.com/react-theming/storybook-addon which is also compatible with Matertial UI. Please use one which better suits you. I'm currently not using MaterialUI in my projects but this addon is created by me and other people for the community and it's expected that people who use this addon could also contribute. PRs are always welcome!