如何组合多个内联样式对象？
在React中，您可以清楚地创build一个对象并将其分配为内联样式。 即。 如以下所说的。
var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; var divStyle2 = {fontSize: '18px'}; React.render(<div style={divStyle}>Hello World!</div>, mountNode); 如何组合多个对象并将它们分配在一起？
你可以使用扩展运算符：
<button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button
如果您使用React Native，则可以使用数组表示法：
<View style={[styles.base, styles.background]} />
有关更多信息，请参阅文档 。
你可以用Object.assign()来做到这一点。
在你的例子中，你会做：
ReactDOM.render( <div style={Object.assign(divStyle, divStyle2)}> Hello World! </div>, mountNode );
这将合并这两种风格。 如果有匹配的属性，第二个样式将replace第一个样式。
正如Brandon指出的那样，如果您想要在不应用fontSize的情况下重用divStyle ，则应该使用Object.assign({}, divStyle, divStyle2) 。
我喜欢用这个来创build具有默认属性的组件。 例如，下面是一个默认的margin-right无状态组件：
const DivWithDefaults = ({ style, children, ...otherProps }) => <div style={Object.assign({ marginRight: "1.5em" }, style)} {...otherProps}> {children} </div>;
所以我们可以渲染这样的东西：
<DivWithDefaults> Some text. </DivWithDefaults> <DivWithDefaults className="someClass" style={{ width: "50%" }}> Some more text. </DivWithDefaults> <DivWithDefaults id="someID" style={{ marginRight: "10px", height: "20px"}}> Even more text. </DivWithDefaults>
哪个会给我们结果：
<div style="margin-right:1.5em;">Some text.</div> <div style="margin-right:1.5em;width50%;" class="someClass">Some more text.</div> <div style="margin-right:10px;height:20px;" id="someID">Even more text.</div>
Object.assign()是一个简单的解决scheme，但是（当前） 最好的答案是使用它（尽pipe做无状态的组件很好）会导致OP期望合并两个state objects 。
有了两个参数， Object.assign()实际上会改变第一个对象，影响将来的实例化。
例如：
考虑一个盒子的两种可能的样式configuration：
var styles = { box: {backgroundColor: 'yellow', height: '100px', width: '200px'}, boxA: {backgroundColor: 'blue'}, };
所以我们希望我们所有的盒子都有默认的“盒子”样式，但是要覆盖一些不同的颜色：
//this will be yellow <div style={styles.box}></div> //this will be blue <div style={Object.assign(styles.box, styles.boxA)}></div> //this SHOULD be yellow, but it's blue. <div style={styles.box}></div>
一旦Object.assign()执行，'styles.box'对象就会被更改。
解决方法是将一个空对象传递给Object.assign() 。 这样做，你告诉方法产生一个新的对象与你通过它的对象。 像这样：
//this will be yellow <div style={styles.box}></div> //this will be blue <div style={Object.assign({}, styles.box, styles.boxA)}></div> //a beautiful yellow <div style={styles.box}></div>
这种对象变异的概念对于React是至关重要的，正确使用Object.assign()对使用像Redux这样的库真的很有帮助。
所以基本上我以错误的方式来看待这个问题。 从我所看到的，这不是一个React特定的问题，更多的是如何将两个JavaScript对象组合在一起的JavaScript问题（没有类似命名属性的clobber）。
在这个StackOverflow答案中解释它。 如何dynamic合并两个JavaScript对象的属性？
在jQuery中，我可以使用扩展方法。
为了扩展@PythonIsGreat的说法，我创build了一个全局函数，可以为我做到这一点：
var css = function(){ var args = $.merge([true, {}], Array.prototype.splice.call(arguments, 0)); return $.extend.apply(null, args); }
这将对象深深地扩展为一个新的对象，并允许可变数量的对象作为参数。 这可以让你做这样的事情：
return( <div style={css(styles.base, styles.first, styles.second,...)} ></div> ); var styles = { base:{ //whatever }, first:{ //whatever }, second:{ //whatever } }
我已经build立了一个模块，如果你想添加样式基于这样的条件：
multipleStyles(styles.icon, { [styles.iconRed]: true })
