在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);
如何组合多个对象并将它们分配在一起?
当前回答
我已经为此构建了一个模块，如果你想根据条件添加样式 是这样的:
multipleStyles(styles.icon, { [styles.iconRed]: true })
https://www.npmjs.com/package/react-native-multiple-styles
其他回答
const style1 = {
backgroundColor: "#2196F3",
}
const style2 = {
color: "white",
}
const someComponent = () => {
return <div style={{ ...style1, ...style2 }}>This has 2 separate styles</div>
}
注意双花括号。播音接线员是你的朋友。
数组表示法是react native中组合样式的最佳方式。
这展示了如何组合2个Style对象，
<Text style={[styles.base, styles.background]} >Test </Text>
这展示了如何组合样式对象和属性，
<Text style={[styles.base, {color: 'red'}]} >Test </Text>
这将适用于任何react本机应用程序。
为了更进一步，你可以创建一个类名类的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>
你可以使用展开运算符:
<button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button
在React中有多个内联样式。
<div onClick={eleTemplate} style={{'width': '50%', textAlign: 'center'}}/>
