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;
}

如何在JSS格式上编写多个CSS属性？

1 个答案: