How to add multiple style attributes to a react element?
<p>How would I go about adding multiple style attributes to my React element?</p>

<p>Some of the components in my app are using the same styles throughout with minor variations in styles. I am trying to accomplish something along the lines of <code>&lt;div style={this.styles.mainStyle, this.styles.variationInStyle}&gt;&lt;/div&gt;</code>.</p>

<p>These styles are in a file called styles.js hence the <code>this.styles.x</code>. It works with only one style in it. The closest I found to this solution was in a <a href="https://www.reddit.com/r/reactjs/comments/33vbho/is_it_possible_to_use_multiple_styles_within/" rel="noreferrer">Reddit Post</a>. The solution was <code>&lt;div style={$.extend({}, style1, style2)}&gt;&lt;/div&gt;</code> but of course, it doesn't work nor does the variation <code>&lt;div style={style1, style2)}&gt;&lt;/div&gt;</code>. </p>

<p>Any insight would be greatly appreciated! I will also be posting in Reddit and the Reactiflux Discord group if the answer should come from either source, I will post the answer here.</p>