如何为我的 React 元素添加多个样式属性？
我的应用程序中的一些组件自始至终都使用相同的样式，但样式略有不同。我正在尝试按照<div style={this.styles.mainStyle, this.styles.variationInStyle}></div> 的方式完成一些事情。
这些样式在一个名为 styles.js 的文件中，因此是 this.styles.x。它仅适用于其中一种样式。我发现最接近这个解决方案的是Reddit Post。解决方案是<div style={$.extend({}, style1, style2)}></div>，但当然，它不起作用，变体<div style={style1, style2)}></div> 也不起作用。
任何见解将不胜感激！如果答案应该来自任一来源，我还将在 Reddit 和 Reactiflux Discord 组中发布，我将在此处发布答案。
【问题讨论】：
style只是一个Object，css值转为camelCase，所以你可以用任何方式合并两个对象，它应该可以工作。
ES6： style={Object.assign({}, style1, style2)}
ES7： style={{...style1, ...style2}}
lodash: style={_.merge({}, style1, style2)}
【讨论】：
.assign 之后有一个未闭合的括号
const style1 = require('./style1.css'); const style2 = require('./style2.css'); 或者如果它是内联样式，那么它已经是一个对象，不是吗？
style={[style1, style2]}
正如@michealmuxica 所说，样式道具只是一个带有骆驼外壳的JS对象。因此，您可以像这样在组件上设置样式：
<MyComponent style={{height:"100%", marginLeft:"70%"}} />
我更喜欢为每个组件创建另一个 JS 文件来包含样式对象，然后将它们导入到组件的文件中。我觉得这样可以使代码更加干净和模块化：
//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} /> );
}
});
【讨论】：