How can I apply fallback style properties to a React JS component?

Question

I would like to apply fallback style properties to a component. For instance:

var inlineStyle = {
    display: '-webkit-box',
    display: '-webkit-flex',
    display: '-moz-box',
    display: '-moz-flex',
    display: '-ms-flexbox',
    display: 'flex'
}
return <div style={inlineStyle}>{divContent}</div>;

Is there any way to do this? At the moment they are being ignored.

Answer 1

There is this issue (https://github.com/facebook/react/issues/2020) on React Github page where Paul O’Shannessy states that this is not possible for now.

You should either:

• feature/browser detect before specifying the style value or
• use regular CSS

Answer 2

Each declaration overrites the last since they all have the same key name. Object literal syntax is problematic when the property value needs prefixing, even today (9/6/2016) there is no baked in solution.

Myself, needed to solve this problem, wanted to stay in CSS-in-JS land (hurray for fully self contained components) and not add a build step so made a package that keeps things simple called called Style It that simply lets you write CSS.

npm install style-it --save

Functional Syntax (JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;

        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-flex-flow: row wrap;
        justify-content: space-around;
      }

      .flex-item {             
        background: tomato;
        padding: 5px;
        width: 200px;
        height: 150px;
        margin-top: 10px;

        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
      }
    `,
      <ul class="flex-container">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
      </ul>
    );
  }
}

export default Intro;

JSX Syntax (JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        .flex-container {
          padding: 0;
          margin: 0;
          list-style: none;

          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;

          -webkit-flex-flow: row wrap;
          justify-content: space-around;
       }

       .flex-item {
          background: tomato;
          padding: 5px;
          width: 200px;
          height: 150px;
          margin-top: 10px;

          line-height: 150px;
          color: white;
          font-weight: bold;
          font-size: 3em;
          text-align: center;
        }
      `}

      <ul class="flex-container">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
      </ul>
    </Style>
  }
}

export default Intro;

HTML / CSS pulled from Chris Coyier's A Complete Guide to Flexbox post.