Question

我如何将多个样式属性添加到我的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小组中发帖，我会在这里发布答案。

Answer 1

style只是一个对象，css值转向camelCase，所以你可以用任何方式合并两个对象，它应该可以工作。

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

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

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

Answer 2

正如@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} /> );
    }
});

如何将多个样式属性添加到react元素？

2 个答案: