我将如何向我的 React 元素添加多个样式属性？
我的应用程序中的一些组件始终使用相同的样式，但样式略有不同。我正试图完成一些沿着<div style={this.styles.mainStyle, this.styles.variationInStyle}></div>.
这些样式位于一个名为 style.js 的文件中，因此this.styles.x. 它只适用于一种样式。我发现最接近这个解决方案的是在Reddit Post 中。解决方案是，<div style={$.extend({}, style1, style2)}></div>但当然，它不起作用，变体也不起作用<div style={style1, style2)}></div>。
任何见解将不胜感激！如果答案来自任何一个来源，我也将在 Reddit 和 Reactiflux Discord 组中发布，我将在此处发布答案。
style 只是一个对象，css 值变成驼峰式大小写，所以你可以使用任何方式合并两个对象，它应该可以工作。
ES6： style={Object.assign({}, style1, style2)}
ES7： style={{...style1, ...style2}}
洛达什： style={_.merge({}, style1, style2)}
正如@michealmuxica 所说，样式props只是一个带有骆驼外壳的 JS 对象。因此，您可以在组件上设置样式，如下所示：
<MyComponent style={{height:"100%", marginLeft:"70%"}} />
我更喜欢为每个组件创建另一个 JS 文件来包含样式对象，然后将它们导入到组件的文件中。我觉得这样可以使代码更加干净和module化：
//in MyComponentStyles.js
var style = {
base:{
height:"100%",
width: "100%",
marginLeft: "auto",
marginRight: "auto"
},
//...other styles...
};
export default styles;
//in MyComponent.js
import {default as MyComponentStyles} from "./<path to styles>/MyComponentStyles.js;
var App = React.createClass({
render: function() {
return ( <MyComponent style={MyComponentStyles.base} /> );
}
});