Как написать несколько CSS-свойств в JSS-формате?

Question

Я хочу сделать обходной путь для моей текущей работы, который необходимо реализовать, чтобы получить правильные результаты на iOS 9.3 и ее предшественниках.

Требуется исправить эту строку CSS:

.wrapping-element {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

И я хочу добраться до JSS. Моя попытка такая:

const styles = {
  root: {
    display: '-webkit-box',
    display: '-moz-box',
    display: '-ms-flexbox',
    display: '-webkit-flex',
    display: 'flex',
  }
};

Но, похоже, это неправильный способ сделать это. Потому что eslint сделать это ошибкой, потому что он имеет несколько ключей. И поскольку это объект, применяется только последний ключ: значение. CMIIW

Answer 1

У меня сегодня была эта проблема, и, немного покопавшись, я обнаружил, что этого можно добиться, используя Fallbacks :

const styles = {
  root: {
    display: 'flex',
    fallbacks: [
      { display: '-webkit-box' },
      { display: '-moz-box' },
      { display: '-ms-flexbox' },
      { display: '-webkit-flex' }
    ]
  }
}

Будет выведено:

.root {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}