Css 如何向react元素添加多个样式属性？

如何向React元素添加多个样式属性

我的应用程序中的一些组件始终使用相同的样式，但样式略有不同。我正试图按照

的思路完成一些事情

这些样式位于名为styles.js的文件中，因此名为

this.styles.x

。它只适用于一种样式。我发现最接近这个解决方案的是一个。解决方案是

，但当然，它不起作用，变体也不起作用

---

如有任何见解，将不胜感激！我还将在Reddit和Reactiflux Discord组中发布答案。如果答案来自任何一个来源，我将在这里发布答案。

style

只是一个对象，css值将变为camelCase，因此您可以使用任何方式合并两个对象，并且应该可以工作

ES6:

style={Object.assign（{}，style1，style2）}

ES7:

style={{{……style1，……style2}}

---

lodash:

style={{.merge（{}，style1，style2）}

正如@michealmuxica所说，style prop只是一个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} /> );
    }
});

//在MyComponentStyles.js中
变量样式={
基数：{
高度：“100%”，
宽度：“100%”，
marginLeft：“自动”，
marginRight：“自动”
},
//…其他样式。。。
};
导出默认样式；
//在MyComponent.js中
从“//MyComponentStyles.js”导入{default as MyComponentStyles}；
var App=React.createClass（{
render:function（）{
返回（）；
}
});

如果这些样式与添加到的组件位于单独的工作表中，该如何工作？为了访问这些样式，我必须键入此.styles.style1}此外，ES6示例中的语法在

之后有一个未闭合的括号。分配

我不明白。您面临什么问题？它只是和对象，什么阻止了您合并两个javascript对象？如果它来自两个样式表，那么

constyle1=require（'./style1.css'）；constyle2=require（'./style2.css'）；

或者如果它是内联样式，那么它已经是一个对象了，不是吗？在React Native中，可以在花括号内使用数组：

style={[style1，style2]}

我遇到了一个“意外的令牌导出”错误。这个问题的答案可能会有所帮助：我正在使用babel，以前也一直在关注预设。