在React中，你可以清楚地创建一个对象，并将其赋值为内联样式。即. .下面所提到的。
var divStyle = {
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
var divStyle2 = {fontSize: '18px'};
React.render(<div style={divStyle}>Hello World!</div>, mountNode);
如何组合多个对象并将它们分配在一起?
当前回答
需要合并对象中的属性。 例如,
const boxStyle = {
width : "50px",
height : "50px"
};
const redBackground = {
...boxStyle,
background: "red",
};
const blueBackground = {
...boxStyle,
background: "blue",
}
<div style={redBackground}></div>
<div style={blueBackground}></div>
其他回答
为了更进一步，你可以创建一个类名类的helper函数:
const styleRules = (...rules) => {
return rules.filter(Boolean).reduce((result, rule) => {
return { ...result, ...rule };
}, {});
};
然后在你的组件中有条件地使用它:
<div style={
styleRules(
divStyle,
(window.innerWidth >= 768) && divStyleMd,
(window.innerWidth < 768) && divStyleSm
)
}>Hello World!</div>
数组表示法是react native中组合样式的最佳方式。
这展示了如何组合2个Style对象，
<Text style={[styles.base, styles.background]} >Test </Text>
这展示了如何组合样式对象和属性，
<Text style={[styles.base, {color: 'red'}]} >Test </Text>
这将适用于任何react本机应用程序。
需要合并对象中的属性。 例如,
const boxStyle = {
width : "50px",
height : "50px"
};
const redBackground = {
...boxStyle,
background: "red",
};
const blueBackground = {
...boxStyle,
background: "blue",
}
<div style={redBackground}></div>
<div style={blueBackground}></div>
你可以用Object.assign()来实现。
在你的例子中，你会这样做:
ReactDOM.render(
<div style={Object.assign(divStyle, divStyle2)}>
Hello World!
</div>,
mountNode
);
这样两种风格就合并了。如果有匹配的属性，则第二个样式将取代第一个样式。
正如Brandon所指出的，您应该使用Object。分配({}，divStyle, divStyle2)如果你想重用divStyle没有fontSize应用到它。
我喜欢使用它来创建具有默认属性的组件。例如，这里有一个默认右边距的无状态组件:
const DivWithDefaults = ({ style, children, ...otherProps }) =>
<div style={Object.assign({ marginRight: "1.5em" }, style)} {...otherProps}>
{children}
</div>;
所以我们可以渲染如下内容:
<DivWithDefaults>
Some text.
</DivWithDefaults>
<DivWithDefaults className="someClass" style={{ width: "50%" }}>
Some more text.
</DivWithDefaults>
<DivWithDefaults id="someID" style={{ marginRight: "10px", height: "20px" }}>
Even more text.
</DivWithDefaults>
它会给我们一个结果:
<div style="margin-right:1.5em;">Some text.</div>
<div style="margin-right:1.5em;width50%;" class="someClass">Some more text.</div>
<div style="margin-right:10px;height:20px;" id="someID">Even more text.</div>
为了扩展@PythonIsGreat所说的内容，我创建了一个全局函数来为我做这件事:
var css = function(){
var args = $.merge([true, {}], Array.prototype.splice.call(arguments, 0));
return $.extend.apply(null, args);
}
这将对象深度扩展为一个新对象，并允许使用可变数量的对象作为参数。这允许你做这样的事情:
return(
<div style={css(styles.base, styles.first, styles.second,...)} ></div>
);
var styles = {
base:{
//whatever
},
first:{
//whatever
},
second:{
//whatever
}
}
