0

Are there any simple ways to patch React to autoprefix styles, such that the rendered HTML doesn't differ on the client and server?

For example, is it possible to get

<div style={{display: 'flex'}}/>

to render to (ignoring data-reactid):

<div style="display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;"/>
Irshad
  • 222
  • 4
  • 17
eye_mew
  • 8,855
  • 7
  • 30
  • 50
  • Why would you not just use a css class for this? – Mike Driver Jun 04 '15 at 13:21
  • inline styles allow modular coupling of styles with their respective components. For example, look at http://material-ui.com/ – eye_mew Jun 04 '15 at 15:03
  • Yeah I'm aware of what you're doing but clearly where vendor prefixes or other such stuff is needed it would make more sense to use a globally available class like 'display-flex' or similar? Most applications would not have too many of these. – Mike Driver Jun 05 '15 at 06:54

3 Answers3

0

In the specific case you posted, you may have to make a function in which you pass your style and it creates the correct styles. In cases where a simple prefix will work, you could use something like react-prefixr which just adds ms,Webkit,etc. to the style structure. If display:flex is not handled properly by react-prefixr, you can probably submit it as PR.

Jonathan Rowny
  • 7,588
  • 1
  • 18
  • 26
  • This can never handle things like flexbox, since the styles passed into a component are represented as an object. In the example I've given, the key `display` must map to several values, which is not possible. – eye_mew Jun 04 '15 at 15:01
  • I didn't even realize that, but you're right. In this case you may have to forego the benefits of react's inline styles and, create a class, and blame it on browser compatibility. – Jonathan Rowny Jun 04 '15 at 15:19
  • Actually you could do sth. like `{display: '-webkit-flex;display:flex'}` to achieve multiple values. Works as the object gets stringified. – rofrischmann Jan 01 '16 at 17:01
0

I've had the same issue and wanted an easy way to mixin styles. So I created a library that lets you use less/sass style mixins https://seogrady.github.io/style-mixin.

seogrady
  • 261
  • 2
  • 14
0

I've just today created a simple prefixing tool, react-prefixer. This handles prefixing possibilities for relevant browsers.

I say relevant because you call out display:-webkit-box syntax, which is basically Safari 5.1, its pretty non-existent these days. Additionally, it only adds the syntax needed, meaning you won't see the full string of styles as you showed ... based on browser support, it will either provide the prefixed version or the spec version, no need to clog up the markup with useless styles.

It's still pretty young (I coded it this morning), but maybe it can help.

tquetano-r7
  • 29
  • 1