Problems when trying to integrate with MUI theme in React

[VeselinKirevJisc]

Hi I wonder how to integrate it with MUI theme and react. All I need is to switch between dark and light theme. I only have one MUI theme so I guess just between that one and the dark on provided by this project (since I have components that are white and are not visible in my current default theme).

Here is what I got so far in config.js

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import { addDecorator } from '@storybook/react';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { theme } from '../src/main/themes/theme.styles.js';
import { useDarkMode } from 'storybook-dark-mode';

addDecorator(storyFn => (
  <MuiThemeProvider theme={theme}>
    <CssBaseline />
    {storyFn()}
  </MuiThemeProvider>
));

I've tried this below but no success, since it complains about some undefined variables and etc. and maybe seems to be the wrong approach.

function ThemeWrapper(props) {
  // render your custom theme provider
  return (
    <MuiThemeProvider value={useDarkMode() ? darkTheme : theme}>
      <CssBaseline />
      {props.children}
    </MuiThemeProvider>
  );
}

addDecorator(storyFn => (<ThemeWrapper>{storyFn()}</ThemeWrapper>));

Thank you so much! : )

[hipstersmoothie]

That seem like an ok approach. What's the error?

[VeselinKirevJisc]

Thanks for the response I couldn't resolve it and moved on and cannot reproduce now, it was something to do with unexpected undefined variables etc. not sure what was going on. Will close the issue for now. Thanks again! : )