Problem with stepper styling

[maciejmyslinski]

Problem description

Hello! I am using material-ui with MERN.
I try to implement stepper.
Everything works great but it looks like styling or autoprefixing is broken

Take a look at that code:

I found it is because wrongly prefixed display property.
When I fixed it like this:

everything looks pretty.
I also wonder what is this mui-prepared...

Steps to reproduce

1. Use MERN.
2. Install material-ui
3. Use code for vertical linear stepper

Versions

• Material-UI: 0.15
• React: 15.0.1
• Browser: Chrome 50.0.2661.102

[nathanmarks]

@maciejmyslinski

I THINK this is some combination of the new rendering method in React and how the inline prefixing library works.

[maciejmyslinski]

@nathanmarks what can I do about it? Do you have any advice for me?

[maciejmyslinski]

I had something like this:

const muiTheme = getMuiTheme({}, {
  userAgent: 'all',
});

and changed it to

const muiTheme = getMuiTheme({}, {
  userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.82 Safari/537.36',
});

it works now, and I am able to develop the app further but certainly I have to fix it before going to production. Please help me to figure out proper inline prefixing with react.

[nathanmarks]

@maciejmyslinski The issue is not rooted in material-ui, we use an external library for prefixing. Can you please post here for help? https://github.com/rofrischmann/inline-style-prefixer

[robinweser]

@nathanmarks @maciejmyslinski It is actually not possible to use the prefixer without a userAgent (which defaults back to inline-style-prefix-all), because React 15+ does not allow passing fallback strings as inline style.
This actually breaks inline styles as they can't be used to support compatible CSS output, but they're already fixing this by introducing a new helper facebook/react#6701.

The prefixer API (at least the prefix-all by now) is already updated to return an array e.g. ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex'] which material-ui must either pass to the new helper soon or transform to css by doing sth like prefixes.join(';' + dashCase(property) + ':').

Therefore this is not really a bug within the prefixer but rather an issue with inline styles right now.

PS: The reason why you see the values comma separated is because passing an array to the style will automatically do .join(',').

[maciejmyslinski]

Thank you for this research @rofrischmann!

[oliviertassinari]

For anyone facing this issue with userAgent: 'all' and doing server side rendering.
Here is my hack-around:

const muiTheme = getMuiTheme();

if (process.env.PLATFORM === 'server') {
  const prepareStyles = muiTheme.prepareStyles;

  muiTheme.prepareStyles = (style) => {
    style = prepareStyles(style);

    if (typeof style.display === 'object') {
      style.display = style.display.join(';display:');
    }

    return style;
  };
}

...

<MuiThemeProvider muiTheme={muiTheme}>

[nolandg]

big thanks @oliviertassinari. Was hitting this issues in a Meteor SSR app. Works great with this hack.