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

Posted 2023-02-22

【中文标题】如何在 JSS 格式上编写多个 CSS 属性？

【英文标题】：How to write multiple CSS Properties on JSS-format?

【发布时间】：2018-10-16 20:47:06

【问题描述】：

我想为我目前的工作做一些变通方法，以便在 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 因为它有多个键而使它成为一个错误。因为它是一个对象，所以只有最后一个 key:value 被应用。 CMIIW

【问题讨论】：

这有帮助吗？ github.com/cssinjs/jss/issues/22

【参考方案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;

【讨论】：

工作文档链接：cssinjs.org/jss-syntax/?v=v10.4.0#fallbacks