javascript - 如何在 JSS 格式上编写多个 CSS 属性?
问题描述
我想为我当前的工作做一些变通方法,这些工作需要实现,以便在 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
解决方案
我今天自己也遇到了这个问题,经过一番挖掘后,我发现这可以使用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;
}