如何将多个样式属性添加到react元素? [英] How to add multiple style attributes to a react element?

问题描述

我该如何向我的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 只是一个对象，css值转换为camelCase，因此您可以使用任何方式合并两个对象，并且它应该可以.

ES6: style = {Object.assign({}，style1，style2)}

ES7: style = {{... style1，... style2}}

破折号:: style = {_.merge({}，style1，style2)}

How would I go about adding multiple style attributes to my React element?

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 <div style={this.styles.mainStyle, this.styles.variationInStyle}></div>.

These styles are in a file called styles.js hence the this.styles.x. It works with only one style in it. The closest I found to this solution was in a Reddit Post. The solution was <div style={$.extend({}, style1, style2)}></div> but of course, it doesn't work nor does the variation <div style={style1, style2)}></div>.

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.

解决方案

style is just an Object, with css value turn to camelCase, so you could use any way to merge two object, and it should work.

ES6: style={Object.assign({}, style1, style2)}

ES7: style={{...style1, ...style2}}

lodash: style={_.merge({}, style1, style2)}

这篇关于如何将多个样式属性添加到react元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！