在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);
如何组合多个对象并将它们分配在一起?
当前回答
为了扩展@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
}
}
其他回答
const style1 = {
backgroundColor: "#2196F3",
}
const style2 = {
color: "white",
}
const someComponent = () => {
return <div style={{ ...style1, ...style2 }}>This has 2 separate styles</div>
}
注意双花括号。播音接线员是你的朋友。
你可以使用作曲
const styles = StyleSheet.create({
divStyle :{
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
},
divStyle2 :{fontSize: '18px'}
})
React.render(<div style={StyleSheet.compose(styles.divStyle, styles.divStyle2)}>Hello World!</div>, mountNode);
OR
React.render(<div style={[styles.divStyle, styles.divStyle2]}>Hello World!</div>, mountNode);
如果你正在使用React Native，你可以使用数组符号:
<View style={[styles.base, styles.background]} />
请查看我关于这方面的详细博文。
其实有一种正式的组合方式，如下所示:
<View style={[style01, style02]} />
但是，有一个小问题，如果其中一个被父组件传递，并且它是通过组合形式的方式创建的，我们就有一个大问题:
// The passing style02 from props: [parentStyle01, parentStyle02]
// Now:
<View style={[style01, [parentStyle01, parentStyle02]]} />
最后一行导致UI bug, React Native不能处理数组中的深数组。所以我创建了我的helper函数:
import { StyleSheet } from 'react-native';
const styleJoiner = (...arg) => StyleSheet.flatten(arg);
通过使用我的styleJoiner，你可以在任何地方组合任何类型的风格和组合风格。即使是未定义的或其他无用的类型也不会破坏样式。
你可以使用展开运算符:
<button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button
