CSS 如何向 React 元素添加多个样式属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34846352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add multiple style attributes to a react element?
提问by Michael Stearn
How would I go about adding multiple style attributes to my React element?
我将如何向我的 React 元素添加多个样式属性？
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>.
我的应用程序中的某些组件始终使用相同的样式，但样式略有不同。我正试图完成一些沿着<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>.
这些样式位于一个名为 style.js 的文件中，因此this.styles.x. 它只适用于一种样式。我发现最接近此解决方案的是Reddit Post。解决方案是，<div style={$.extend({}, style1, style2)}></div>但当然，它不起作用，变体也不起作用<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.
任何见解将不胜感激！如果答案来自任何一个来源，我也将在 Reddit 和 Reactiflux Discord 组中发布，我将在此处发布答案。
回答by Trung Tín Tr?n
styleis just an Object, with css value turn to camelCase, so you could use any way to merge two object, and it should work.
style只是一个对象，css 值变成驼峰式大小写，所以你可以使用任何方式合并两个对象，它应该可以工作。
ES6:style={Object.assign({}, style1, style2)}
ES6：style={Object.assign({}, style1, style2)}
ES7:style={{...style1, ...style2}}
ES7：style={{...style1, ...style2}}
lodash:style={_.merge({}, style1, style2)}
洛达什：style={_.merge({}, style1, style2)}
回答by Justin Kruse
as @michealmuxica said, the style prop is is just a JS object with camel casing for the keys. So you can set your style on your components as such:
正如@michealmuxica 所说，样式道具只是一个带有骆驼外壳的 JS 对象。因此，您可以在组件上设置样式，如下所示：
<MyComponent style={{height:"100%", marginLeft:"70%"}} />
I prefer to create another JS file per component to contain the style objects, then import them into the component's file. I feel like this keeps the code more clean and modular:
我更喜欢为每个组件创建另一个 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} /> );
}
});
