Support for Material UI's "next" branch?

[Zuurkern]

Hello there,

We really like this addon, but we are now using Material UI's next branch which uses JSS. There are no component explorers out there yet which support MUI:next, so we were wondering if you had any plans for an addon that would provide support in the future?

[usulpro]

Hi @Zuurkern!

Thank you for using this addon! We're working on improving it and have plans to extend support for other library and theming solutions. Actually now we're working on separating the core part of addon from Material-UI.

After that it'll be possible to create new addons with similar functionality for different libraries. JSS is definitely one of them.

[usulpro]

Regarding Material UI's next branch, since this is open source project, we really could use the help of developers using it. At least in this case could help information about how you use JSS for styling Material-UI and what tasks it would be useful to solve with this addon. At the moment I can only see a little bit of information about the possibilities of styling using CSS in official documentation.

[Zuurkern]

Hey sorry for not replying sooner. I'm getting my teammates @jensvrai and @T-Grave on it too and we will have a shot at it.

[saschb2b]

+1 Will provide help for supporting next branch if my freetime allows it, too.

[hoschi]

Does this addon still work with "next" branch for injecting one (the current app) theme? @UsulPro as you said you use "next" already, any pointers?

[usulpro]

@hoschi do you mean css in js? It's WIP

[hoschi]

@UsulPro I try to ask another way: Does your storybooks (and this addon) still work when upgrading to MUI next branch or did you need to change your storybook config/setup? I'm fine not having the theme manipulation pane working, just wanted to now how much effort is the MUI upgrade for the storybook side. We use storybooks only for snapshot testing and documentation, not for theming.

[RobinVanCauter]

@hoschi You can use storybook decorators for this.

Here's an example of how we use MUI next branch in one of our apps storybook:

Our decorator file: (muiDecorator.jsx)

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
// We import our apps theme file
import theme from '../imports/app/ui/style/theme';

const muiDecorator = (story) => (
  <MuiThemeProvider theme={theme} >
    {story()}
  </MuiThemeProvider>
);

export default muiDecorator;

Our storybook config file (config.js):

import { configure, addDecorator } from '@kadira/storybook';
import muiDecorator from './muiDecorator';

addDecorator(muiDecorator);

function loadStories() {
  require('../.stories');
}

configure(loadStories, module);

[hoschi]

@T-Grave thanks!

[usulpro]

We started v0.9.0-alpha to support Material-UI@next branch