我想将后备样式属性应用于组件。例如：
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>;
有没有办法做到这一点？目前，他们被忽视了。
在 React Github 页面上有这个问题 ( https://github.com/facebook/react/issues/2020 )，Paul O'Shannessy 指出目前这是不可能的。
你应该：
每个声明都覆盖最后一个，因为它们都具有相同的键名。当属性值需要前缀时，对象字面量语法是有问题的，即使在今天（2016 年 9 月 6 日）也没有成熟的解决方案。
我自己，需要解决这个问题，想留在 CSS-in-JS 领域（为完全自包含的组件欢呼），而不是添加构建步骤，因此制作了一个名为Style It的包来保持简单，称为Style It，它可以让您编写 CSS .
npm install style-it --save
函数式语法( 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 语法( 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 摘自 Chris Coyier 的A Complete Guide to Flexbox帖子。