[Toolbar] display:flex is not a string, but an object

[create-renegr]

Problem description

display:flex is an object, instead of a string. Which breaks the flow of the UI. Any idea why? In the example of the documentation flex is a string.

Versions

• Material-UI: 0.15.0
• React: 15.0.1
• Browser: Chromium 50.0

[hathawsh]

I've traced this problem to inline-style-prefixer, a package material-ui depends on. inline-style-prefixer rewrites styles based on user-agent detection and fails to detect Chromium correctly. The following code, added to any material-ui app and tested in Chromium, demonstrates that inline-style-prefixer generates a list rather than a string:

import Prefixer from 'inline-style-prefixer';
console.log(new Prefixer().prefix({display: 'flex'}).display);

[create-renegr]

It appears to me, that a fix has been merged into inline-style-prefixer (see robinweser/inline-style-prefixer#84). But at the time of writing, there is no new release published. (Bugfix merged after 1.0.4 release)

So we have to wait for a new release for inline-style-prefixer. Right?

[angelikatyborska]

I have just created a pull request #4613 that updates inline-style-prefixer to the newest (2.0.0) release, but that did not solve this issue for me. The code @hathawsh provided still returns a list in Chromium (Version 51.0.2704.79 Ubuntu 14.04 64-bit).

[oliviertassinari]

Closing as a duplicate of #5052.